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.

Difference between revisions of "User:Makanyane/common.css"

From TWC Wiki
Jump to navigationJump to search
(nope)
(Tag: Blanking)
(css as at 2019 to try and sort Pike's page)
Line 1: Line 1:
 +
/** 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;
 +
}
 +
 +
.frontpage-wikinews, .frontpage-generalmodding, .frontpage-m2tw {
 +
    border: 2px solid grey;
 +
    padding: .4em .9em .9em;
 +
    color: black;
 +
    vertical-align: top;
 +
}
 +
 +
.frontpage-wikinews {
 +
    width: 25%;
 +
    background-color: #cff;
 +
}
 +
 +
.frontpage-generalmodding {
 +
    background-color: #ffc;
 +
}
 +
 +
.frontpage-m2tw {
 +
    width: 65%;
 +
    background-color: #ffebcd;
 +
}
 +
 +
/* Infobox template style stolen from Wikipedia */
 +
 +
.infobox {
 +
    border: 1px solid #aaa;
 +
    background-color: #f9f9f9;
 +
    color: black;
 +
    font-size: 90%;
 +
    margin-bottom: 0.5em;
 +
    margin-left: 1em;
 +
    padding: 0.2em;
 +
    float: right;
 +
    clear: right;
 +
}
 +
.infobox td,
 +
.infobox th {
 +
    vertical-align: top;
 +
}
 +
.infobox caption {
 +
    font-size: larger;
 +
    margin-left: inherit;
 +
}
 +
.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;
 +
}
 +
 +
/* styles for bordered infobox with merged rows */
 +
.infobox.bordered .mergedtoprow td,
 +
.infobox.bordered .mergedtoprow th {
 +
    border: 0;
 +
    border-top: 1px solid #aaa;
 +
    border-right: 1px solid #aaa;
 +
}
 +
 +
.infobox.bordered .mergedrow td,
 +
.infobox.bordered .mergedrow th {
 +
    border: 0;
 +
    border-right: 1px solid #aaa;
 +
}
 +
 +
/*****
 +
** Table formatting
 +
*****/
 +
  table.wikitable,
 +
  table.collapsetable {
 +
      margin:1em 1em 1em 0;
 +
      background:#F9F9F9;
 +
      border:1px #AAA solid;
 +
      border-collapse:collapse;
 +
      }
 +
 +
  table.wikitable th, table.wikitable td,
 +
  table.collapsetable th, table.collapsetable td {
 +
      border:1px #AAA solid;
 +
      padding:0.2em;
 +
      }
 +
 +
  table.wikitable th,
 +
  table.collapsetable th {
 +
      background:#F2F2F2;
 +
      text-align:center;
 +
      }
 +
 +
  table.wikitable caption,
 +
  table.collapsetable caption {
 +
      margin-left:inherit;
 +
      margin-right:inherit;
 +
      }
 +
 +
/******* portal standardisation attempt*****/
 +
.TWCportal {
 +
    border: 2px solid grey;
 +
    padding: .4em .9em .9em;
 +
    color: black;
 +
    vertical-align: top;
 +
    background-color: #e3e3e3;
 +
}
 +
 +
.TWCportal h3 {
 +
    padding:5px;
 +
    background-color:#7d1515;
 +
    color:white;
 +
}
 +
 +
.portallink a:link {
 +
    color:#DCE6FF;
 +
}
 +
 +
.portallink a:visited {
 +
    color:#DCE6FF;
 +
}
 +
 +
.portallink a:hover {
 +
    color:#B7C4ED;
 +
}
 +
 +
/******* new front page boxes*****/
 +
 +
.portal_TW {
 +
    border: 2px solid grey;
 +
    padding: .4em .9em .9em;
 +
    color: black;
 +
    vertical-align: top;
 +
    background-color: #E5E1DB;
 +
}
 +
 +
.portal_TW h3 {
 +
    padding:5px;
 +
    background-color:#7d1515;
 +
    color:white;
 +
}
 +
/******* modding box standardisation attempt*****/
 +
 +
.modding {
 +
    border: 2px solid grey;
 +
    padding: .4em .9em .9em;
 +
    color: black;
 +
    vertical-align: top;
 +
    background-color: #cdc7c7;
 +
}
 +
 +
.modding h3 {
 +
    padding:5px;
 +
    background-color:#7d1515;
 +
    color:white;
 +
}
 +
 +
/* End infobox styles */
 +
 +
 +
 +
 +
/**
 +
* 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);
 +
}

Revision as of 07:38, 26 May 2020

/** 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;
}

.frontpage-wikinews, .frontpage-generalmodding, .frontpage-m2tw {
    border: 2px solid grey;
    padding: .4em .9em .9em;
    color: black;
    vertical-align: top;
}

.frontpage-wikinews {
    width: 25%;
    background-color: #cff;
}

.frontpage-generalmodding {
    background-color: #ffc;
}

.frontpage-m2tw {
    width: 65%;
    background-color: #ffebcd;
}

/* Infobox template style stolen from Wikipedia */
 
.infobox {
    border: 1px solid #aaa;
    background-color: #f9f9f9;
    color: black;
    font-size: 90%;
    margin-bottom: 0.5em;
    margin-left: 1em;
    padding: 0.2em;
    float: right;
    clear: right;
}
.infobox td,
.infobox th {
    vertical-align: top;
}
.infobox caption {
    font-size: larger;
    margin-left: inherit;
}
.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;
}
 
/* styles for bordered infobox with merged rows */
.infobox.bordered .mergedtoprow td,
.infobox.bordered .mergedtoprow th {
    border: 0;
    border-top: 1px solid #aaa;
    border-right: 1px solid #aaa;
}
 
.infobox.bordered .mergedrow td,
.infobox.bordered .mergedrow th {
    border: 0;
    border-right: 1px solid #aaa;
}

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

/******* portal standardisation attempt*****/
.TWCportal {
    border: 2px solid grey;
    padding: .4em .9em .9em;
    color: black;
    vertical-align: top;
    background-color: #e3e3e3;
} 

.TWCportal h3 {
    padding:5px; 
    background-color:#7d1515; 
    color:white;
}

.portallink a:link {
    color:#DCE6FF;
}

.portallink a:visited {
    color:#DCE6FF;
}

.portallink a:hover {
    color:#B7C4ED;
}

/******* new front page boxes*****/

.portal_TW {
    border: 2px solid grey;
    padding: .4em .9em .9em;
    color: black;
    vertical-align: top;
    background-color: #E5E1DB;
} 

.portal_TW h3 {
    padding:5px; 
    background-color:#7d1515; 
    color:white;
}
/******* modding box standardisation attempt*****/

.modding {
    border: 2px solid grey;
    padding: .4em .9em .9em;
    color: black;
    vertical-align: top;
    background-color: #cdc7c7;
} 

.modding h3 {
    padding:5px; 
    background-color:#7d1515; 
    color:white;
}

/* End infobox styles */




/**
 * 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);
}