MediaWiki:Common.css

Explain xkcd: It's 'cause you're dumb.
Jump to: navigation, search

Note: After saving, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Konqueror: Click Reload or press F5
  • Opera: Clear the cache in Tools → Preferences
/**********************************************************************
 * Styles for the Navbox (navigation box) template                    *
 **********************************************************************/
.navbox {                    /* Navbox container style */
    border: 1px solid #aaa;
    width: 100%;
    margin: auto;
    clear: both;
    font-size: 88%;
    text-align: center;
    padding: 5px;
}
.navbox-inner,
.navbox-subgroup {
    width: 100%;
}
.navbox th,
.navbox-title,
.navbox-abovebelow {
    text-align: center;      /* Title and above/below styles */
    padding-left: 2em;
    padding-right: 1em;
}
th.navbox-group {            /* Group style */
    white-space: nowrap;
    /* @noflip */
    text-align: right;
}
.navbox,
.navbox-subgroup {
    background: #fdfdfd;      /* Background color */
}
.navbox-list {
    border-color: #fdfdfd;    /* Must match background color */
}
.navbox th,
.navbox-title {
    background: #ccccff;      /* Level 1 color */
}
.navbox-abovebelow,
th.navbox-group,
.navbox-subgroup .navbox-title {
    background: #ddddff;      /* Level 2 color */
}
.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
    background: #e6e6ff;      /* Level 3 color */
}
.navbox-even {
    background: #f7f7f7;      /* Even row striping */
}
.navbox-odd {
    background: transparent;  /* Odd row striping */
}
table.navbox + table.navbox {  /* Single pixel border between adjacent navboxes */
    margin-top: -1px;          /* (doesn't work for IE6, but that's okay)      */
}
.navbox .hlist td dl,
.navbox .hlist td ol,
.navbox .hlist td ul,
.navbox td.hlist dl,
.navbox td.hlist ol,
.navbox td.hlist ul {
    padding: 0.125em 0;      /* Adjust hlist padding in navboxes */
}
.navbox .hlist dd,
.navbox .hlist dt,
.navbox .hlist li {
    white-space: nowrap;      /* Nowrap list items in navboxes */
    white-space: normal !ie;  /* IE < 8 no-wraps entire list, so disable it */
}
.navbox .hlist dd dl,
.navbox .hlist dt dl,
.navbox .hlist li ol,
.navbox .hlist li ul {
    white-space: normal;      /* But allow parent list items to be wrapped */
}
ol + table.navbox,
ul + table.navbox {
    margin-top: 0.5em;        /* Prevent lists from clinging to navboxes */
}

/* 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.mini li span {
  font-variant: small-caps;
}
/* 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;
}
/* 'show'/'hide' buttons created dynamically by the CollapsibleTables javascript
  in [[MediaWiki:Common.js]] are styled here so they can be customised. */
.collapseButton {
    /* @noflip */
    float: right;
    font-weight: normal;
    /* @noflip */
    margin-left: 0.5em;
    /* @noflip */
    text-align: right;
    width: auto;
}

div.leftAlign span.mw-collapsible-toggle
{
   float: left;
   margin-left: 0px;
   margin-right: 3px;
}

/* In navboxes, the show/hide button balances the v·d·e links
  from [[Template:Navbar]], so they need to be the same width. */
.navbox .collapseButton {
    width: 6em;
}

/* Styling for JQuery makeCollapsible, matching that of collapseButton */
.mw-collapsible-toggle {
    font-weight: normal;
    /* @noflip */
    text-align: right;
}
.navbox .mw-collapsible-toggle {
    width: 6em;
}

.hlist dd:after, .hlist li:after {
  content: " ·";
  font-weight: bold;
}

.hlist dd:last-child:after, .hlist dt:last-child:after, .hlist li:last-child:after {
  content: none;
}

.hlist dd, .hlist dt, .hlist li {
  display: inline;
  margin: 0;
  white-space: nowrap;
}

.hlist dl, .hlist ol, .hlist ul {
  margin: 0;
  padding: 0;
}

/**********************************************************************
 * Styles for the Infobox template                                    *
 **********************************************************************/

.infobox {
    border: 1px solid #aaa;
    background-color: #f9f9f9;
    color: black;
    /* @noflip */
    margin: 0.5em 0 0.5em 1em;
    padding: 0.2em;
    /* @noflip */
    float: right;
    /* @noflip */
    clear: right;
    /* @noflip */
    text-align: left;
    font-size: 88%;
    line-height: 1.5em;
}
.infobox caption {
    font-size: 125%;
    font-weight: bold;
}
.infobox td,
.infobox th {
    vertical-align: top;
}
.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;
}

.infobox.sisterproject {
    width: 20em;
    font-size: 90%;
}

.infobox.standard-talk {
    border: 1px solid #c0c090;
    background-color: #f8eaba;
}
.infobox.standard-talk.bordered td,
.infobox.standard-talk.bordered th {
    border: 1px solid #c0c090;
}

/* styles for bordered infobox with merged rows */
.infobox.bordered .mergedtoprow td,
.infobox.bordered .mergedtoprow th {
    border: 0;
    border-top: 1px solid #aaa;
    /* @noflip */
    border-right: 1px solid #aaa;
}

/* User block messages */
div.user-block {
    padding: 5px;
    margin-bottom: 0.5em;
    border: 1px solid #A9A9A9;
    background-color: #FFEFD5;
}

.infobox.bordered .mergedrow td,
.infobox.bordered .mergedrow th {
    border: 0;
    /* @noflip */
    border-right: 1px solid #aaa;
}

/**********************************************************************
 * External link tweaks                                               *
 **********************************************************************/

/* Custom icon for links to xkcd.com */
a.external[href*="xkcd.com"] {
    background: url("http://www.explainxkcd.com/wiki/images/1/1f/xkcd_favicon.png") no-repeat scroll right center transparent !important;
    padding-right: 18px !important;
}

/* Don't add the external link arrow to urls pointing to this site.
 * Also, don't add the xkcd favicon (see above) to elements marked
 * with the class "plainlinks", nor to the page [[explain xkcd:Copyrights]]. */
a.external[href*="explainxkcd.com"],
.plainlinks a.external[href*="xkcd.com"],
.page-explain_xkcd_Copyrights a.external[href*="xkcd.com"] {
    background: none !important;
    padding-right: 0 !important;
}

/* Don't underline links on hover if so instructed. Used in Template:comic */
.no-link-underline a:hover {
    text-decoration: none;
}

/**********************************************************************
 * Special styles for [[List of all comics]] (and elsewhere)          *
 **********************************************************************/

/* Don't show create link for articles that already exist */
a:not(.new) + span.create {
    display: none;
}

/* Add some horizontal padding to tables, if they request it*/
table.table-padding > * > tr > td {
    padding-left:  0.5em;
    padding-right: 0.5em;
}

/**********************************************************************
 * Add icons to the left navigation menu                              *
 **********************************************************************/

#mw-panel #p-navigation li {
    line-height: 2em;
}
div#p-navigation li a {
    padding-left: 20px;
    background-repeat: no-repeat;
    display: inline-block;
    line-height: 16px;
}
div#p-navigation li#n-mainpage-description a {
    background-image: url("http://upload.wikimedia.org/wikipedia/commons/3/3f/House_icon.png");
}
div#p-navigation li#n-Latest-comic a {
    background-image: url("http://upload.wikimedia.org/wikipedia/commons/5/5b/New_silk.png");
}
div#p-navigation li#n-portal a {
    background-image: url("http://upload.wikimedia.org/wikipedia/commons/d/de/Group.png");
}
div#p-navigation li#n-xkcd-com a {
    background-image: url("http://www.explainxkcd.com/wiki/images/thumb/2/26/Favicon.png/16px-Favicon.png");
}
div#p-navigation li#n-recentchanges a {
    background-image: url("http://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Farm-Fresh_clock_edit.png/16px-Farm-Fresh_clock_edit.png");
}
div#p-navigation li#n-randompage a {
    background-image: url("http://upload.wikimedia.org/wikipedia/commons/b/b3/Silk_arrow_switch.png");
}
div#p-navigation li#n-All-comics a {
    background-image: url("http://upload.wikimedia.org/wikipedia/commons/c/c0/Images.png");
}
div#p-navigation li#n-help a {
    background-image: url("http://upload.wikimedia.org/wikipedia/commons/a/aa/Help.png");
}

/**********************************************************************
 * Format tagline                                                     *
 **********************************************************************/
#siteSub {
    display: block;
    font-style: italic;
    opacity:0.5;
    padding-left: 20px;
    background-repeat: no-repeat;
}

/**********************************************************************
 * Bolden xkcd's main topics at Category:comics by topic              *
 **********************************************************************/
.page-Category_Comics_by_topic a[title$=Romance],
.page-Category_Comics_by_topic a[title$=Sarcasm],
.page-Category_Comics_by_topic a[title$=Math],
.page-Category_Comics_by_topic a[title$=Language] {
    font-weight: bold;
}

/**********************************************************************
 * Main page formatting                                               *
 **********************************************************************/
.page-Main_Page .firstHeading {
    display: none;
}
/* Dirty hack to hide the categories of the current comic from main page.
 * A clean implementation should be instead done
 * with a "categories" template that <noinclude>'s the categories.
 * Although it seems the Main Page isn't *really* included in those categories,
 * so this fix should suffice for the time being
 */
.page-Main_Page div#catlinks li a:not([title="Category:Root category"]),
.page-Main_Page div#catlinks span.noprint {
    display: none;
}
.page-Main_Page div#catlinks ul li {
    border-left: none;
    position: absolute;
    left: 70px;
    bottom: 6px;
}
.page-Main_Page li#ca-viewsource a[href$="Main_Page&action=edit"]:hover {
    cursor: help;
}
/**********************************************************************
 * Special:ContributionScores                                         *
 **********************************************************************/
table.contributionscores {
  text-align: right;
}
table.contributionscores td:first-child { /* score column */
  font-weight: bold; /* make it bold so it stands out from the other numbers */
}
.page-Special_ContributionScores table.contributionscores td:first-child { /* score column, only in Special:ContributionScores */
  padding: 0;        /* remove padding so that the graphical meter touches the cell edges */
  width: 25em;       /* use a constant width so all the tables in the page align */
}
.page-Special_ContributionScores table.contributionscores td:last-child { /* username column, only in Special:ContributionScores */
  width: 25em;       /* use a constant width so all the tables in the page align */
}
table.contributionscores tr {
  background-color: Lavender;
}
.contributionscores.sortable tr:nth-child(-n+10),
.contributionscores:not(.sortable) tr:nth-child(-n+11) { /* top 10 entries */
  background-color: white;
}
.contributionscores tr:nth-child(1) td:last-child:before,
.contributionscores tr.header + tr td:last-child:before { 
  color: Goldenrod;
  content: "❶ ";
}
.contributionscores tr:nth-child(2) td:last-child:before,
.contributionscores tr.header + tr + tr td:last-child:before {
  color: Grey;
  content: "❷ ";
}
.contributionscores tr:nth-child(3) td:last-child:before,
.contributionscores tr.header + tr + tr + tr td:last-child:before {
  color: SaddleBrown;
  content: "❸ ";
}
.contributionscores-meter {
  line-height: 1.9em;           /* to make it full the default row height */
  display: inline-block;        /* so that it will align right */
  background-color: LightGreen;
  padding-right: 0.2em;         /* to counter the fact that the cell's padding was removed above */
}
/* for the home page */
.page-Main_Page h4.contributionscores-title:before {
  content: "Active users - ";
}
/* Make preformatted text wrap. */
pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -webkit-pre-wrap;      /* WebKit browsers */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

/* Allow limiting of which header levels are shown in a TOC;
   <div class="toclimit-3">, for instance, will limit to
   showing ==headings== and ===headings=== but no further
   (as long as there are no =headings= on the page). */
.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;
}
Personal tools
Namespaces

Variants
Actions
Navigation
Toolbox

It seems you are using noscript, which is stopping our project wonderful ads from working. Explain xkcd uses ads to pay for bandwidth, and we manually approve all our advertisers, and our ads are restricted to unobtrusive images and slow animated GIFs. If you found this site helpful, please consider whitelisting us.

Want to advertise with us, or donate to us with Paypal or Bitcoin?