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
(added test stuff here to view on other skins - should hopefully only affect my sandbox classes)
Line 233: Line 233:
 
}
 
}
  
/*  RESPONSIVE COLUMNS */
+
/*  =============================================================================================================== */
/*  STYLING */
+
/*  Responsive column layout from http://www.responsivegridsystem.com/ TWCR added to class names to avoid conflicts */
div.section, div.group {
+
/*  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;
 
         border: none;
 
         background: none;
 
         background: none;
Line 242: Line 243:
 
}
 
}
  
/*  SECTIONS  ============================================================================= */
+
.TWCRsection {
 
 
.section {
 
 
clear: both;
 
clear: both;
 
padding: 0px;
 
padding: 0px;
Line 250: Line 249:
 
}
 
}
  
/*  GROUPING  ============================================================================= */
+
.TWCRgroup:before,
 
+
.TWCRgroup:after {
.group:before,
 
.group:after {
 
 
     content:"";
 
     content:"";
 
     display:table;
 
     display:table;
 
}
 
}
.group:after {
+
.TWCRgroup:after {
 
     clear:both;
 
     clear:both;
 
}
 
}
.group {
+
.TWCRgroup {
 
     zoom:1; /* For IE 6/7 (trigger hasLayout) */
 
     zoom:1; /* For IE 6/7 (trigger hasLayout) */
 
}
 
}
  
/*  GRID COLUMN SETUP   ==================================================================== */
+
/*  GRID COLUMN SETUP */
 
+
.TWCRcol {
.col {
 
 
display: block;
 
display: block;
 
float:left;
 
float:left;
Line 272: Line 268:
 
}
 
}
  
.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */
+
.TWCRcol:first-child { margin-left: 0; } /* all browsers except IE6 and lower */
 
 
 
 
/*  REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */
 
 
 
@media only screen and (max-width: 700px) {
 
.col {
 
margin: 1% 0 1% 0%;
 
}
 
}
 
  
/* GRID OF THREE  */
+
/* ANY FULL WIDTH COLUMN IN SECION*/
.span_3_of_3 {
+
.span_full {
 
width: 100%;
 
width: 100%;
 
}
 
}
 +
/* SPANNING 2 COLUMNS OUT OF 3*/
 
.span_2_of_3 {
 
.span_2_of_3 {
 
width: 66.1%;
 
width: 66.1%;
 
}
 
}
 +
/* SINGLE WIDTH COLUMN OF 3*/
 
.span_1_of_3 {
 
.span_1_of_3 {
 
width: 32.2%;
 
width: 32.2%;
 
}
 
}
 
+
/* SINGLE COLUMN OF 2*/
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
 
 
 
@media only screen and (max-width: 700px) {
 
.col { margin: 1% 0 1% 0%;}
 
.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
 
}
 
 
 
/*  GRID OF TWO  ============================================================================= */
 
 
 
 
 
.span_2_of_2 {
 
width: 100%;
 
}
 
 
 
 
.span_1_of_2 {
 
.span_1_of_2 {
 
width: 49.2%;
 
width: 49.2%;
 
}
 
}
 
+
/* PAIR OF COLUMNS 40/60 percent splits */
/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
+
.span_40pct_of_2 {
 
 
@media only screen and (max-width: 700px) {
 
.span_2_of_2 {
 
width: 100%;
 
}
 
.span_1_of_2 {
 
width: 100%;
 
}
 
}
 
/*  GRID OF TWO  40/60============================================================================= */
 
 
 
 
 
.span_40_of_2 {
 
 
width: 39.36%;
 
width: 39.36%;
 
}
 
}
.span_60_of_2 {
+
.span_60pct_of_2 {
 
width: 59.04%;
 
width: 59.04%;
 
}
 
}
/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
 
  
 +
/*  GO FULL WIDTH AT LESS THAN 700 PIXELS & REDUCE MARGINS*/
 
@media only screen and (max-width: 700px) {
 
@media only screen and (max-width: 700px) {
.span_40_of_2 {
+
.TWCRcol { margin: 1% 0 1% 0%; }
width: 100%;
+
.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%; }
.span_60_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;
 
.TWCportal_1, .TWCportal_2, .TWCportal_3 {    border: none;
 
     padding: .4em .9em .1em;
 
     padding: .4em .9em .1em;

Revision as of 03:50, 17 May 2019

/** CSS placed here will be applied to all skins */

/* 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;
    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;
    color: black;
    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%);
}
.TWCportal_head {
    padding:5px; 
    background:#7d1515; 
    color:white;
    margin-bottom: 0em;
}
h2.TWCportal_head{
    font-size: 128%;
    border-bottom: 0;
    font-weight: bolder;
}
h1.TWCportal_head{
    padding:10px;
    border-bottom: 0;
    text-align: center;
}