Welcome to the TWC Wiki! You are not logged in. Please log in to the Wiki to vote in polls, change skin preferences, or edit pages. See HERE for details of how to LOG IN.

MediaWiki:Common.css

From TWC Wiki
Revision as of 08:41, 19 April 2020 by Makanyane (talk | contribs)
Jump to navigationJump to 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
  • Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
/** CSS placed here will be applied to all skins */

/* To make all images responsive */
img {
	max-width:100%;
	height:auto;
}

/* Random stuff */

div.section div.section {
    /* Indent, but not for the highest-level section */
    margin-left: 1.5em;
}

/* Hide numbers for TOCs wrapped in <div class="nonumbertoc"></div> */
div.nonumbertoc span.tocnumber { display: none; }

/* 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, which
   there shouldn't be according to the MoS). */
.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;
}

.notice { margin: 1em; font-style: italic; }

/* Front page */

body.page-Main_Page h1.firstHeading {
    display: none;
}

/* Infobox template style stolen from Wikipedia */
/* Float right has been left as the default behaviour as it's on a lot of non-template pages, bordered, info-right and info-bottom should be useable as classes on their own, but they're partly designed to nerf bits of .infobox behaviour*/
 
.infobox {
    font-size: 90%;
    margin-bottom: 0.5em;
    margin-left: 1em;
    float: right;
    clear: right;
}
.infobox caption {
    font-size: larger;
    margin-left: inherit;
}
table.bordered {
    border-collapse: collapse;
}
table.bordered td,
table.bordered th {
    border: 1px solid #aaa;
    vertical-align: top;
    padding: 0.2em;
}
table.info-right {
    text-align:left;
    width: 23em;
}
table.info-bottom {
    font-size: 100%;
    float: none;
    clear: none;
    width: 100%;
    margin: 0;
}

/*****
** Table formatting
*****/
   table.wikitable {
      margin:1em 0;
      background:#F9F9F9;
      border:1px #AAA solid;
      border-collapse:collapse;
      }
 
   table.wikitable th, table.wikitable td {
      border:1px #AAA solid;
      padding:0.2em;
      }
 
   table.wikitable th {
      background:#F2F2F2;
      text-align:center;
      }
 
   table.wikitable caption {
      margin-left:inherit;
      margin-right:inherit;
      }

/**
 * Styling for links generated by [[MediaWiki:Edittools]]
 * @source https://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;
}

/*common changes for ajaxpoll*/
.ajaxpoll {
    width: auto;
}

/*  =============================================================================================================== */
/*  Responsive column layout from http://www.responsivegridsystem.com/ TWCR added to class names to avoid conflicts */
/*  Trying to add styling to the columns tends to break the layout - suggest styling the elements within them instead */
div.TWCRsection, div.TWCRgroup {
        border: none;
        background: none;
	padding: none;
	margin: none;
}

.TWCRsection {
	clear: both;
	padding: 0px;
	margin: 0px;
}

.TWCRgroup:before,
.TWCRgroup:after {
    content:"";
    display:table;
}
.TWCRgroup:after {
    clear:both;
}
.TWCRgroup {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

/*  GRID COLUMN SETUP */
.TWCRcol {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}

.TWCRcol:first-child { margin-left: 0; } /* all browsers except IE6 and lower */

/* ANY FULL WIDTH COLUMN IN SECION*/
.span_full {
	width: 100%;
}
/* SPANNING 2 COLUMNS OUT OF 3*/
.span_2_of_3 {
	width: 66.1%;
}
/* SINGLE WIDTH COLUMN OF 3*/
.span_1_of_3 {
	width: 32.2%;
}
/* SINGLE COLUMN OF 2*/
.span_1_of_2 {
	width: 49.2%;
}
/* PAIR OF COLUMNS  40/60 percent splits */
.span_40pct_of_2 {
	width: 39.36%;
}
.span_60pct_of_2 {
	width: 59.04%;
}

/*  GO FULL WIDTH AT LESS THAN 700 PIXELS & REDUCE MARGINS*/
@media only screen and (max-width: 700px) {
	.TWCRcol { margin: 1% 0 1% 0%; }
	.col { margin: 1% 0 1% 0%;}
	.span_3_of_3, .span_2_of_3, .span_1_of_3, .span_2_of_2, .span_1_of_2, .span_40pct_of_2, .span_60pct_of_2 { width: 100%; }
}

/*  =============================================================================================================== */
/* NEW CLASSES FOR FRONT PAGE AND PORTALS (old ones should be deleted when confirmed not in use) */
.TWCportal_1, .TWCportal_2, .TWCportal_3 {    border: none;
    padding: .4em .9em .1em;
    vertical-align: top;
}
.TWCportal_1 {
    background: rgb(227,227,227);
    background: linear-gradient(180deg, rgba(165,165,180,0.5) 0%, rgba(165,165,180,0) 100%);
}
.TWCportal_2 {
    background: rgb(205,199,199);
    background: linear-gradient(180deg, rgba(168,160,162,0.5) 0%, rgba(168,160,162,0) 100%);
}
.TWCportal_3 {
    background: rgb(229,225,219);
    background: linear-gradient(180deg, rgba(168,168,162,0.5) 0%, rgba(168,168,162,0) 100%);
}
/*  =============================================================================================================== */
/* NEW CLASSES TO STANDARDISE MESSAGE BOXES AND TEMPLATES */
/* the #content table.xxx  is only there because the way TWC.css is written the ID is overruling the class*/
#content table.info-notice, .info-notice {
    background-color: #e5e0df;
    padding: 5px;
    border: 2px solid grey;
    color: black;
    margin: 5px 0px;
}
#content table.mild-notice, .mild-notice {
    background-color: #C5D6ED;
    padding: 5px;
    border: 2px solid grey;
    color: black;
    margin: 5px 0px;
}
#content table.strong-notice, .strong-notice {
    background-color: #FF3D3D;
    padding: 5px;
    border: none;
    color: white;
    margin: 5px 0px;
}
/*  =============================================================================================================== */
/* STANDARDISE RED AND GREEN BOXES (IN CASE IT NEEDS DIFFERENT BG ON DARK SKIN)*/
div.required {
    border:2px solid red; 
    padding:0px 5px; 
    background-color: rgba(255, 0, 0, 0.05);
}
div.unlocked {
    border:2px solid green; 
    padding:0px 5px; 
    background-color: rgba(0, 255, 0, 0.05);
}
/*  =============================================================================================================== */
/* optional custom adjustment to fix mw-collapsible class to give stacked tables and 100% width, with tinted background*/
.collapse-custom {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0px;
}
.collapse-custom th {
    text-align: left;
    background-color: rgba(255, 255, 255, 0.2);
    padding: 4px 15px;
}
.collapse-custom td {
    background-color: rgba(255, 255, 255, 0.4);
    padding: 2px 15px;
}
/* Collapsible elements. Toggle-link moved to left. Margin around it adjusted. */
.collapse-custom span.mw-collapsible-toggle {
    float:left;
    margin-left:0;
    margin-right:1em;
}