Difference between revisions of "MediaWiki:Common.css"
From TWC Wiki
Jump to navigationJump to searchm (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: | ||
} | } | ||
− | + | /* 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 template style stolen from Wikipedia */ | ||
.infobox { | .infobox { | ||
− | + | font-size: 90%; | |
− | |||
− | |||
margin-bottom: 0.5em; | margin-bottom: 0.5em; | ||
margin-left: 1em; | margin-left: 1em; | ||
− | |||
float: right; | float: right; | ||
clear: right; | clear: right; | ||
− | + | border: 1px solid black; | |
− | + | box-shadow: 1px 1px 3px 1px black; | |
− | |||
− | |||
} | } | ||
.infobox caption { | .infobox caption { | ||
Line 74: | Line 55: | ||
margin-left: inherit; | margin-left: inherit; | ||
} | } | ||
− | + | table.bordered { | |
border-collapse: collapse; | border-collapse: collapse; | ||
} | } | ||
− | + | table.bordered td, | |
− | + | table.bordered th { | |
border: 1px solid #aaa; | 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; | ||
} | } | ||
Line 103: | Line 79: | ||
** Table formatting | ** Table formatting | ||
*****/ | *****/ | ||
− | table.wikitable | + | table.wikitable { |
− | + | margin:1em 0; | |
− | margin: | ||
background:#F9F9F9; | background:#F9F9F9; | ||
border:1px #AAA solid; | border:1px #AAA solid; | ||
Line 111: | Line 86: | ||
} | } | ||
− | table.wikitable th, table.wikitable | + | table.wikitable th, table.wikitable td { |
− | |||
border:1px #AAA solid; | border:1px #AAA solid; | ||
padding:0.2em; | padding:0.2em; | ||
} | } | ||
− | table.wikitable | + | table.wikitable th { |
− | |||
background:#F2F2F2; | background:#F2F2F2; | ||
text-align:center; | text-align:center; | ||
} | } | ||
− | table.wikitable | + | table.wikitable caption { |
− | |||
margin-left:inherit; | margin-left:inherit; | ||
margin-right: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; | ||
+ | } |
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; }