MediaWiki:Common.css
Jump to navigation
Jump to search
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* CSS placed here will be applied to all skins */ /* #ca-nstab-ns_3400 { display:none !important; } */ /* body.ns-0 #ca-talk { display:none !important; } */ /* this works */ /* body.ns-0 #ca-nstab { display:none !important; } doesn't work */ body.ns-3400 #ca-talk { display:none !important; } /* this works */ body.ns-3400 #ca-nstab-snippets { display:none !important; } /* 5 August 2025 Added Colors for use in Sidebar and MediaWiki interface */ /* Steel Blue */ :root { --SteelBlue-80: #B6CEE2; --SteelBlue-70: #91B6D4; --SteelBlue-60: #6C9DC6; --SteelBlue-50: #4785B8; --SteelBlue-40: #396A93; } /* End Steel Blue */ /* Tan */ :root { --Tan-90: #F1E7DA; --Tan-80: #E2CFB6; --Tan-70: #D4B791; --Tan-60: #C69F6C; --Tan-50: #B88747; --Tan-40: #936C39; } /* End Tan */ /* 10 Dec 2025 added shades of Light Steel Blue #b0c4de (for catlinks) */ :root { --LightSteelBlue: #B0C4DE; --LightSteelBlue-80: #B7C9E1; --LightSteelBlue-85: #C9D7E8; --LightSteelBlue-90: #DBE4F0; } /* End Light Steel Blue */ /* 10 Dec 2025 added shades of Light Sky Blue #99CCEF for use in page headers */ :root { --LightSkyBlue: #99CCFF; } /* End Light Sky Blue */ /* 10 Dec 2025 added variables for greys */ :root { --PageBackground: #F2F2F2; --QuoteBackground: #FAFAFA; --BlackText: #000000; } /* Black and White as used on MH370 site for tables */ :root { --clr-white: #FFFFFF; --clr-black: #000000; } :root { --clr-grey-base-50: #808080; } /* exactly half way between black and white */ /* Items sorted with lightest color shade first, approximating a Z order */ #mw-head { background-color: var(--SteelBlue-80); } /* full width at top of screen, behind logo */ /* mw-body-content is in front of mw-body */ .mw-body-content { background-color: var(--PageBackground); border-radius: 1em; padding-top:2em; padding-bottom:2em; padding-left:2.5em; padding-right:2.5em; } .mw-body { background-color: var(--SteelBlue-70); } /* is background for everything below header and right of left panel and down to footer */ .mw-footer { background-color: var(--SteelBlue-60); } /* does not extend to bottom of the screen */ .mw-footer { padding-bottom:2em; } /* added 24 Dec 2025 */ #mw-panel.vector-legacy-sidebar.collapsible-nav { background-color: var(--SteelBlue-50); } /* background for menu but extends to top of screen and behind logo and in front of header */ body { background-color: var(--SteelBlue-40); } /* everything below mw-head, full width of screen, to bottom of screen */ .catlinks { background-color: var(--LightSteelBlue); } /* border on category row. was #bdccdb */ .mw-normal-catlinks { background-color: var(--LightSteelBlue-90); padding-left:20px; } /* was #ced8e4 */ /* 17 Sept 2025 added classes for different background color pages */ .BluePage { color: #9900CC; } /* Purple text on blue background */ .GreenPage { color: #000099; } /* Blue text on green background */ .mw-body-content:has(.BluePage) { background-color: #E6F5FF; } .mw-body-content:has(.GreenPage) { background-color: #E6FFF2; } /* 2 August added class to standardised margins when displaying a category tree */ .displayCatTree { margin-left:4em; } /* 1 August 2025 Added a class to standardise page headers, plus a variant for category pages */ .header { width:90%; margin-left:auto; margin-right:auto; margin-bottom:1em; padding-top:10px; padding-bottom:10px; text-align:justify; background-color: var(--LightSkyBlue); border-color: var(--LightSkyBlue); border-radius: 10px; } /* colors were #cce6ff */ .cat { background-color: var(--LightSteelBlue-85); border-color: var(--LightSteelBlue-85); } /* pale shade of blue for header on category pages. was #e8f2fc */ /* 28 July 2025 attempt to indent unordered lists */ .mw-body-content ul { display:block; position:relative; left:1em; overflow-wrap: normal; word-wrap: normal; max-width:90%; text-align:justify; } /* mw-body-content limits scope */ /* .ulNormal { display:block; position:relative; left:2vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; text-align:justify; } */ /* 28 July 2025 added style for quoted text, adapted from mh370wiki.net, used instead of blockquote */ .quote { width: 90%; background: var(--QuoteBackground); /* contrast against page background */ padding-left: 1em;; padding-right: 1em; padding-top: 0.5em; padding-bottom: 0.5em; /* was px */ margin-left:auto; margin-right:auto; margin-top:0.5em; margin-bottom:0.5em; text-align:justify; color: var(--BlackText); /* black */ } /* 27 July 2025 added left margin to images */ .mw-default-size { margin-left: 2em; } /* this is the container. applies to all images */ /* 25 July 2025 added style to indent <pre> Note: No dot required before pre */ pre { width: 90%; margin-left: auto; margin-right: auto; } /* 22 July 2025 Added style to enlarge fonts on Tooltips but currently unable to change tooltip width */ .mw-lingo-definition-text { font-size:125%; } /* Tooltip is also styled as a qtip in jquery.qtip.css */ /* _________________________________________________________________________________________________________________________*/ /* 20 July 2025 Fluid Typography and Font Variables */ /* Copied from mh370wiki.net and adapted for use here */ /* Fluid Typography - see Responsive And Fluid Typography With vh And vw Units https://www.smashingmagazine.com/2016/05/fluid-typography/ Unlike responsive typography, which changes only at set breakpoints, fluid typography resizes smoothly to match any device width. */ /* Variables for font size ( to be used in Vector.css ) see https://foxland.fi/naming-typography-css-variables/ */ /* Clamp() for min, preferred, max font size see https://developer.mozilla.org/en-US/docs/Web/CSS/clamp() */ /* Notes on font sizes The default text size in browsers is 16px. So, the default size of 1em is 16px. rem (root em) references the base font size of the document. Assuming that the base font size is 16px, we get the following values: 1rem = 16px 1.5rem = 24px 0.5rem = 8px */ /* Use clamp ( min preferred max ) */ :root { font-size: clamp( 1vw, 1.05rem, 1.2vw ); } /* Font sizes using variables from https://foxland.fi/naming-typography-css-variables/ */ /* Example font-size: var(--font-size-100); */ :root { --font-size-625: 62.5%; /* 62.5% of root font size */ --font-size-875: 87.5%; /* 87.5% x root font size */ --font-size-090: 90%; /* 90% x root font size */ --font-size-095: 95%; /* 95% x root font size */ --font-size-100: 100%; /* 100% = root font size */ --font-size-105: 105%; /* 105% x root font size */ --font-size-110: 110%; /* 110% x root font size */ --font-size-115: 115%; /* 115% x root font size */ --font-size-120: 120%; /* 120% x root font size */ --font-size-125: 125%; /* 125% x root font size */ } /* _________________________________________________________________________________________________________________________*/ /* Text Styles using Font Variables */ /* Font Sizes */ body { font-size: var(--font-size-100); } p { font-size: var(--font-size-100); } dl dt dd { font-size: var(--font-size-100); } dd { margin-bottom: 1em; } /* added 11 Oct 2022 to space between a dd and the next dt */ /* ul ol li { font-size: var(--font-size-100); } */ /* Headings are sized by percentage over the base font and also resize based on viewport width */ h1 {font-size: var(--font-size-125);} h2 {font-size: var(--font-size-120);} /* h2 was previously not defined */ h3 {font-size: var(--font-size-115);} h4 {font-size: var(--font-size-110);} h5 {font-size: var(--font-size-105);} /* h6 {font-size: var(--font-size-100);} modified 4 Jan 2025 */ h6 {font-size: var(--font-size-090);} h1, h3, h4, h5, h6 { font-family: Arial, Helvetica, sans-serif; color: var(--clr-DeepPurple-base-30); font-weight: 600; } /* _________________________________________________________________________________________________________________________*/ /* Text layout using padding - use vw for responsive */ /* 10px = 0.625rem; 20px = 1.25rem; 30px = 1.875rem; 40px = 2.5rem; */ /* h1, h2, h3 align with left of page. h4 is rarely used */ /* h1, h2, h3 align with left of page. h4 is rarely used */ h5 { padding-left: 0.5vw; } h6 { padding-left: 0.5vw; } p { padding-left: 1vw; padding-right:1vw; } /* Margin above, added 14 Dec 2025 to avoid need for <br /> before a major heading (h3) */ h3 { margin-top: 0.2vh; } /* started with .5vw */ /* padding below added 15 Dec 2025 */ li { padding-bottom: 0.2vh; } /* ordered list ol and altered padding for a nested list */ ol { display:block; position:relative; left:0.9vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; padding-right:0.9vw; & ol { display:block; position:relative; left:-0.9vw; overflow-wrap: normal; word-wrap: normal; max-width:90%; list-style-type:lower-roman; } } /* Definition List */ dl { padding-left: 2.5vw; padding-right:2.5vw; } dt { padding:right:2.5vw; padding-right:2.5vw; text-align:justify; } dd { padding:right:2.5vw; padding-right:2.5vw; text-align:justify; } /* _________________________________________________________________________________________________________________________*/ /* 11 July 2025 Rows and Columns */ /* 26 July 2020 New row/column layout */ /* July 2025 Copied from www.mh370wiki.net ( with minor adjustments ) */ .Row { display: flex; flex-flow: row nowrap; justify-content: flex-start; justify-content: space-between; width: 100%; } .row { display: flex; flex-flow: row nowrap; justify-content: flex-start; justify-content: space-between; width: 100%; } .column-left { display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; padding-right: 1em; } .column-center {display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; margin-left: 1em; margin-right: 1em; } .column-right {display: flex; flex-flow: column; flex-grow: 1; flex-shrink: 1; padding-left: 1em; } /* flex-basis determines column width */ .col-width-75 { flex-basis: 75%; flex-shrink: 15;} /* usually main column 75% and Comments or Notes 25% */ .col-width-70 { flex-basis: 65%; flex-shrink: 13;} /* added 28 Oct 2020 to use with col-width-30 even though that is actually 33% */ .col-width-60 { flex-basis: 60%; flex-shrink: 12;} /* two columns in ratio 3:2 */ .col-width-50 { flex-basis: 50%; flex-shrink: 10;} /* two equal columns */ .col-width-40 { flex-basis: 40%; flex-shrink: 8;} /*.col-width-30 { flex-basis: 33%; flex-shrink: 7;} */ /* .col-width-30 { flex: 1 1 0;} /* 16 Nov 2020 If columns are equal then flex should be 1 1 0 */ .col-width-30 { flex-basis: 0; } .col-width-25 { flex-basis: 25%; flex-shrink: 5;} /* usually right column */ /* _________________________________________________________________________________________________________________________*/ /* Tables - adapted from MH370 site 10 Dec 2025 */ /* flex-font-base removed */ th { font-weight:bold; } th, td { padding-left: 0.6em; padding-right: 0.6em; } /* added 29 Oct 2020. will apply to all types of table */ th, td { vertical-align: top; } /* added 31 Oct 2020. will apply to all types of table */ /* Custom Tables */ /* w=width Use class in conjunction with tbl or tblB */ .w100 { width: 100%; } /* Table width 100% with no margins */ .w90 { width: 90%; margin-left: auto; margin-right: auto; } /* Table width 90% centred */ .w80 { width: 80%; margin-left: auto; margin-right: auto; } /* Table width 80% centred */ .w75 { width: 75%; margin-left: auto; margin-right: auto; } /* Table width 75% centred */ .w70 { width: 70%; margin-left: auto; margin-right: auto; } /* Table width 70% centred */ .w60 { width: 60%; margin-left: auto; margin-right: auto; } /* Table width 60% centred */ .w50 { width: 50%; margin-left: auto; margin-right: auto; } /* Table width 50% centred */ .w40 { width: 40%; margin-left: auto; margin-right: auto; } /* Table width 40% centred */ .w30 { width: 30%; margin-left: auto; margin-right: auto; } /* Table width 30%centred */ .w25 { width: 25%; margin-left: auto; margin-right: auto; } /* Table width 25% centred */ .w20 { width: 20%; margin-left: auto; margin-right: auto; } /* Table width 20% centred */ .wauto { margin-left: auto; margin-right: auto; } /* Table centred */ /* tbl = table. B=bordered. tblB is a bordered table with white background */ /* tblBcenter = table with border and columns centered */ .tbl { background-color: var(--clr-white); color: var(--clr-black); /* Background is white for a table with no borders. */ vertical-align: top; } .tbl th td { background-color: var(--clr-white); color: var(--clr-black); text-align: left; font-weight: bold; vertical-align: top; } .tbl td { background-color: var(--clr-white); color: var(--clr-black); text-align: left; vertical-align: top; } .tbl tr:nth-child(even) { background-color: var(--clr-white); } /* overwrite the zebra striping default */ .tbl tr:nth-child(odd) { background-color: var(--clr-white); } /* overwrite the zebra striping default */ .tblB { background-color: var(--clr-white); color: var(--clr-black); border-collapse: collapse; border: 1px solid var(--clr-grey-base-50); } .tblB th { background-color: var(--clr-white); color: var(--clr-black); border-collapse: collapse; border: 1px solid; border-color: var(--clr-grey-base-50); text-align: left; font-weight: bold; } .tblB td { background-color: var(--clr-white); color: var(--clr-black); border-collapse: collapse; border: 1px solid var(--clr-grey-base-50); text-align: left; } .tblB tr:nth-child(even) { background-color: var(--clr-white); } /* overwrite the zebra striping default */ .tblB tr:nth-child(odd) { background-color: var(--clr-white); } /* overwrite the zebra striping default */ .tblBcenter { background-color: var(--clr-white); color: var(--clr-black); border-collapse: collapse; border: 1px solid; border-color: var(--clr-grey-base-50); } .tblBcenter th { background-color: var(--clr-white); color: var(--clr-black); border-collapse: collapse; border: 1px solid; border-color: var(--clr-grey-base-50); text-align: center; font-weight: bold; } .tblBcenter td { background-color: var(--clr-white); color: var(--clr-black); border-collapse: collapse; border: 1px solid; border-color: var(--clr-grey-base-50); text-align: center; } .tblBcenter tr:nth-child(even) { background-color: var(--clr-white); } /* overwrite the zebra striping default */ .tblBcenter tr:nth-child(odd) { background-color: var(--clr-white); } /* overwrite the zebra striping default */ /* Overflow for Custom Tables - added 30 Dec 2020 */ .table { overflow-x: auto; } /* this works */ /* .tbl .tblB .tblBcenter { overflow-x: auto; } /* should not show vertical scrollbar and horizontal only when needed */ .tblB { overflow-x: auto; }