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 "MediaWiki:Common.css"

From TWC Wiki
Jump to navigationJump to search
m (going global, works nicely on test)
 
(56 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
/** CSS placed here will be applied to all skins */
 
/** CSS placed here will be applied to all skins */
 +
 +
/* To make all images responsive */
 +
img {
 +
max-width:100%;
 +
height:auto;
 +
}
  
 
/* Random stuff */
 
/* Random stuff */
Line 33: Line 39:
 
}
 
}
  
.frontpage-wikinews, .frontpage-generalmodding, .frontpage-m2tw {
+
/* Infobox template style stolen from Wikipedia, with tweaks */
    border: 2px solid grey;
+
/* 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*/
    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 {
 
.infobox {
     border: 1px solid #aaa;
+
     font-size: 90%;
    background-color: #f9f9f9;
 
    color: black;
 
 
     margin-bottom: 0.5em;
 
     margin-bottom: 0.5em;
 
     margin-left: 1em;
 
     margin-left: 1em;
    padding: 0.2em;
 
 
     float: right;
 
     float: right;
 
     clear: right;
 
     clear: right;
}
+
    border: 1px solid black;
.infobox td,
+
     box-shadow: 1px 1px 3px 1px black;
.infobox th {
 
     vertical-align: top;
 
 
}
 
}
 
.infobox caption {
 
.infobox caption {
Line 74: Line 55:
 
     margin-left: inherit;
 
     margin-left: inherit;
 
}
 
}
.infobox.bordered {
+
table.bordered {
 
     border-collapse: collapse;
 
     border-collapse: collapse;
 
}
 
}
.infobox.bordered td,
+
table.bordered td,
.infobox.bordered th {
+
table.bordered th {
 
     border: 1px solid #aaa;
 
     border: 1px solid #aaa;
 +
    vertical-align: top;
 +
    padding: 0.2em;
 
}
 
}
.infobox.bordered .borderless td,
+
table.info-right {
.infobox.bordered .borderless th {
+
     text-align:left;
    border: 0;
+
     width: 23em;
}
 
 
/* 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;
 
 
}
 
}
+
table.info-bottom {
.infobox.bordered .mergedrow td,
+
    font-size: 100%;
.infobox.bordered .mergedrow th {
+
    float: none;
     border: 0;
+
    clear: none;
     border-right: 1px solid #aaa;
+
     width: 100%;
 +
     margin: 0;
 
}
 
}
  
Line 103: Line 79:
 
** Table formatting
 
** Table formatting
 
*****/
 
*****/
   table.wikitable,
+
   table.wikitable {
  table.collapsetable {
+
       margin:1em 0;
       margin:1em 1em 1em 0;
 
 
       background:#F9F9F9;
 
       background:#F9F9F9;
 
       border:1px #AAA solid;
 
       border:1px #AAA solid;
Line 111: Line 86:
 
       }
 
       }
 
   
 
   
   table.wikitable th, table.wikitable td,
+
   table.wikitable th, table.wikitable td {
  table.collapsetable th, table.collapsetable td {
 
 
       border:1px #AAA solid;
 
       border:1px #AAA solid;
 
       padding:0.2em;
 
       padding:0.2em;
 
       }
 
       }
 
   
 
   
   table.wikitable th,
+
   table.wikitable th {
  table.collapsetable th {
 
 
       background:#F2F2F2;
 
       background:#F2F2F2;
 
       text-align:center;
 
       text-align:center;
 
       }
 
       }
 
   
 
   
   table.wikitable caption,
+
   table.wikitable caption {
  table.collapsetable caption {
 
 
       margin-left:inherit;
 
       margin-left:inherit;
 
       margin-right:inherit;
 
       margin-right:inherit;
 
       }
 
       }
  
/******* portal standardisation attempt*****/
+
/**
 +
* 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;
 +
}
  
.portal {
+
/*common changes for ajaxpoll*/
     border: 2px solid grey;
+
.ajaxpoll {
    padding: .4em .9em .9em;
+
     width: auto;
    color: black;
+
}
    vertical-align: top;
 
    background-color: #e3e3e3;
 
}  
 
  
.portal h3 {
+
/*  =============================================================================================================== */
    padding:5px;  
+
/*  Responsive column layout from http://www.responsivegridsystem.com/ TWCR added to class names to avoid conflicts */
    background-color:#7d1515;  
+
/*  Trying to add styling to the columns tends to break the layout - suggest styling the elements within them instead */
    color:white;
+
div.TWCRsection, div.TWCRgroup {
 +
        border: none;
 +
        background: none;
 +
padding: none;
 +
margin: none;
 
}
 
}
  
/******* modding box standardisation attempt*****/
+
.TWCRsection {
 +
clear: both;
 +
padding: 0px;
 +
margin: 0px;
 +
}
  
.modding {
+
.TWCRgroup:before,
     border: 2px solid grey;
+
.TWCRgroup:after {
     padding: .4em .9em .9em;
+
     content:"";
    color: black;
+
     display:table;
     vertical-align: top;
+
}
     background-color: #cdc7c7;
+
.TWCRgroup:after {
}  
+
     clear:both;
 +
}
 +
.TWCRgroup {
 +
     zoom:1; /* For IE 6/7 (trigger hasLayout) */
 +
}
  
.modding h2 {
+
/*  GRID COLUMN SETUP */
    padding:5px;  
+
.TWCRcol {
    background-color:#203b60;  
+
display: block;
    color:white;
+
float:left;
 +
margin: 1% 0 1% 1.6%;
 
}
 
}
  
.modding.tocnumber {
+
.TWCRcol:first-child { margin-left: 0; } /* all browsers except IE6 and lower */
    background-color:#203b60;  
+
 
    color:white;  
+
/* 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%; }
 +
}
  
/* End infobox styles */
+
/* =============================================================================================================== */
 +
/* 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;
 +
}

Latest revision as of 01:31, 23 October 2023

/** 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, with tweaks */
/* 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;
    border: 1px solid black;
    box-shadow: 1px 1px 3px 1px black;
}
.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;
}