Difference between revisions of "MediaWiki:Common.css"

Latest revision as of 12:46, 4 December 2021

/**********************************************************************
 * 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 */mediawik
}
.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("//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 (sidebar)                    *
 **********************************************************************/

#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("https://upload.wikimedia.org/wikipedia/commons/3/3f/House_icon.png");
}
div#p-navigation li#n-Latest-comic a {
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/5/5b/New_silk.png");
}
div#p-navigation li#n-portal a {
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/d/de/Group.png");
}
div#p-navigation li#n-xkcd-com a {
    background-image: url("//www.explainxkcd.com/wiki/images/thumb/2/26/Favicon.png/16px-Favicon.png");
}
div#p-navigation li#n-recentchanges a {
    background-image: url("https://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("https://upload.wikimedia.org/wikipedia/commons/b/b3/Silk_arrow_switch.png");
}
div#p-navigation li#n-All-comics a {
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/c/c0/Images.png");
}
div#p-navigation li#n-Browse-comics a {
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/3/36/Chart_organisation.png");
}
div#p-navigation li#n-RSS-feed a {
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/4/44/Feed.png");
}
div#p-navigation li#n-help a {
    background-image: url("https://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;
    background-image:url('//www.explainxkcd.com/wiki/images/0/04/16px-BlackHat_head.png');
    padding-left:18px;
    speak:none;
}

/**********************************************************************
 * Mobile-friendly tweaks                                             *
 **********************************************************************/

/* Improve margin between paragraphs, to make them more evident */
#mw-content-text p {
    margin: 0.8em 0;
}

/**********************************************************************
 * 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 !important; /* 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: 40em;       /* 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: 2em;             /* to make it fill 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;
}

/**********************************************************************
 * {{Template:comic}} formatting                                      *
 **********************************************************************/

li.plainlinks:hover, .no-link-underline > li:hover {
 	background-color: #FFF !important;
	box-shadow: none !important;
	-moz-box-shadow: none !important;
	-webkit-box-shadow: none !important; 
}
li.plainlinks:hover > a > span, .no-link-underline > li:hover > a > span {
	color: #6E7B91 !important; 
}