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 06: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); }