MediaWiki:Common.css

/* CSS placed here will be applied to all skins */ /****************************** * Hide items on main page ******************************/ .action-view.page-Main_Page #siteSub, .action-view.page-Main_Page #contentSub, .action-view.page-Main_Page .firstHeading { display: none !important; }

/****************************** * Hide category header 3 ******************************/ div.mw-category-generated h3 { display: none; }

@import url("https://fonts.googleapis.com/css?family=Charm");

/* The transcription progress bar */ .pr_quality { width:20%; border-spacing: 1px; border: 1px solid #ccc; font-size: 1.5em; }

margin: 0 0 1.5em 0; }
 * 1) contentSub {

display: table; border-collapse: collapse; border-spacing: 0px 0px; empty-cells: hide; margin: 0px auto 4px auto; width: 100%; }
 * 1) navigationHeader {

/***************************************** * Lists: bulleted, ordered and unordered ****************************************/ @media screen { .mw-content-ltr ol { margin: 0.8em 0 0 2.1em; padding: 0; } }

/****************************** * Styles for mobile main page ******************************/

@media all and (min-width: 768px) { .lonsdale-mainpage-column { float: left; width: 50%; }	.lonsdale-mainpage-column-first { padding-right: 10px; }	.lonsdale-mainpage-column-second { padding-left: 10px; }	.lonsdale-mainpage-sister-projects { text-align: center; } }

/****************************** * Columns for soldier pages ******************************/

@media all and (min-width: 768px) { .soldier-column { float:left; width:50%; }	.soldier-column-first { padding-right:10px; }	.soldier-column-second { padding-left:10px; } }

/****************************** * To make images responsive ******************************/ .res-img img { max-width:100%; height:auto; margin-bottom:0.2em; text-align:center; }

.res-img-800 img { display: block; margin-left: auto; margin-right: auto; max-width:100%; width:800px; height:auto; margin-bottom:0.2em; text-align:center; }

.res-img-1000 img { display: block; margin-left: auto; margin-right: auto; max-width:100%; width:1000px; height:auto; margin-bottom:0.2em; text-align:center; }

.res-img-1200 img { display: block; margin-left: auto; margin-right: auto; max-width:100%; width:1200px; height:auto; margin-bottom:0.2em; text-align:center; }

/**************************************************** * To hide wikisource proofread icons on index pages ****************************************************/ .mw-indicators.mw-body-content { display: none; }

/****************************** * Blockquotes ******************************/ blockquote { color: #222; border-left: 3px solid #ddd; }

/****************************** * Wikitables ******************************/ table.wikitable { background-color: #f8f9fa; color: #222; margin: 1em 0; border: 1px solid #a3a9b1; border-collapse: collapse; }

table.wikitable > tr > th, table.wikitable > tr > td, table.wikitable > * > tr > th, table.wikitable > * > tr > td { border: 1px solid #a3a9b1; padding: 0.2em 0.4em; }

table.wikitable > tr > th, table.wikitable > * > tr > th { background-color: #eaecf0; text-align: center; }

table.wikitable > caption { font-weight: bold; }

/******************************************************* * Basictable of plain white for clean look general use *******************************************************/ table.basictable { background-color: #fff; color: #444; margin: 0; border: 1px solid #fff; text-align: left; }

table.basictable > tr > th, table.basictable > tr > td, table.basictable > * > tr > th, table.basictable > * > tr > td { background-color: #fff; border: 1px solid #fff; padding: 0.2em 0.4em; text-align: left; }

table.basictable > tr > th, table.basictable > * > tr > th { background-color: #fff; text-align: center; }

table.basictable > caption { font-weight: bold; }

/******************************************* * Infotable for infoboxes on soldier pages *******************************************/ table.infotable { background-color: #f7f7f7; color: #444; margin: 0; border: 3px solid #fff; text-align: left; }

table.infotable > tr > th, table.infotable > tr > td, table.infotable > * > tr > th, table.infotable > * > tr > td { background-color: #f7f7f7; border: none; padding: 0.15em; text-align: left; }

table.infotable > tr > th, table.infotable > * > tr > th { background-color: #1b9591; text-align: center; color: #fff; padding: 10px 5px; }

table.infotable > caption { font-weight: bold; }

/************************************************************** * Remtable for full-width tables on soldier remembrance pages **************************************************************/ table.remtable { background-color: #f7f7f7; color: #444; margin: 0; border: 1px solid #fff; text-align: left; }

table.remtable > tr > th, table.remtable > tr > td, table.remtable > * > tr > th, table.remtable > * > tr > td { background-color: #f7f7f7; border: 1px solid #fff; padding: 0.2em 0.4em; text-align: left; }

table.remtable > tr > th, table.remtable > * > tr > th { background-color: #f7f7f7; text-align: center; }

table.remtable > caption { font-weight: bold; }

/***************************************************** * Pivot-table used on the transcribing projects page *****************************************************/ table.pivot-table { background-color: #f2f2f2; color: #444; margin: 1em 0; border: 1px solid #fff; text-align: center; }

table.pivot-table > tr > th, table.pivot-table > tr > td, table.pivot-table > * > tr > th, table.pivot-table > * > tr > td { border: 2px solid #fff; padding: 0.4em; text-align: center; }

table.pivot-table > tr > th, table.pivot-table > * > tr > th { background-color: #517398; text-align: center; color: #fff; padding: 10px 5px; }

table.pivot-table > caption { font-weight: bold; }

/**************************************************** * diarytable used on war diary transcriptions pages ****************************************************/ table.diarytable { background-color: #f2f2f2; color: #444; margin: 1em 0; border: 1px solid #fff; text-align: center; }

table.diarytable > tr > th, table.diarytable > tr > td, table.diarytable > * > tr > th, table.diarytable > * > tr > td { border: 2px solid #fff; padding: 0.3em; text-align: center; }

table.diarytable > tr > th, table.diarytable > * > tr > th { background-color: #444; text-align: center; color: #fff; padding: 10px 5px; }

table.diarytable > caption { font-weight: bold; }

/****************************** * Great War periodicals table ******************************/ table.gwptable { background-color: #f8f9fa; color: #444; margin: 1em 0; border: 1px solid #fff; text-align: center; }

table.gwptable > tr > th, table.gwptable > tr > td, table.gwptable > * > tr > th, table.gwptable > * > tr > td { border: 1px solid #fff; padding: 0.2em 0.4em; text-align: center; }

table.gwptable > tr > th, table.gwptable > * > tr > th { background-color: #eaecf0; text-align: center; }

table.gwptable > caption { font-weight: bold; }

/****************************** * Page Index table ******************************/ table.page-index-table { background-color: #f8f9fa; color: #444; margin: 1em 0; border: 1px solid #fff; text-align: center; }

table.page-index-table > tr > th, table.page-index-table > tr > td, table.page-index-table > * > tr > th, table.page-index-table > * > tr > td { border: 1px solid #fff; padding: 0.2em 0.4em; text-align: center; }

table.page-index-table > tr > th, table.page-index-table > * > tr > th { background-color: #eaecf0; text-align: center; }

table.page-index-table > caption { font-weight: bold; }

/****************************** * Roll of Honour table ******************************/ table.rohtable { background-color: #f2f2f2; color: #444; margin: 1em 0; border: 1px solid #fff; text-align: left; }

table.rohtable > tr > th, table.rohtable > tr > td, table.rohtable > * > tr > th, table.rohtable > * > tr > td { border: 2px solid #fff; padding: 0.4em; text-align: left; }

table.rohtable > tr > th, table.rohtable > * > tr > th { background-color: #50ab8a; text-align: center; color: #fff; padding: 10px 5px; }

table.rohtable > caption { font-weight: bold; }

/* CSS used on MediaWiki.org */ .mainpage_row { display: flex; flex-direction: row; flex-flow: row wrap; justify-content: space-between; padding: 0; margin: 0 -5px 0 -5px; } .mainpage_box { flex: 1; margin: 5px; min-width: 210px; border: 1px solid #CCC; padding: 0 10px 10px 10px; box-shadow: 0 2px 2px rgba(0,0,0,0.1); } .mainpage_box h3 { /* Reset padding so is equal across skins */ padding-right: 0; padding-top: 0; padding-bottom: 0; /* Padding left gets overridden by headanchor gadget */ margin: 0.5em 0; } /* Set padding left only if headanchor gadget is not enabled */ .mainpage_box h3:not(.tpl-vheadanchor-heading) { padding-left: 0; } .mainpage_box h3 .header_icon { float: left; margin-right: 5px; } .mainpage_box .items { border-top: 1px solid #CCC; padding-top: 0.5em; } .mainpage_box p:last-child { margin-bottom: 0; } .mainpage_boxcontents_small { font-size: 95%; }

/*************************************** * Banner and photo slider on main page ***************************************/ .banner-image { position: relative; overflow: hidden; max-width: 1125px; height: auto; margin-bottom: .6em; } .banner-image img { max-width: 100%; height: auto; width: auto\9; } .banner-box-wide { width: 80% } .banner-box-left, .banner-box-right { padding: 8px 7px; background: rgb(16,16,16); background: rgba(0,0,0,0.3); border-radius: 4px; width: 40%; } .banner-box-left { left: 3%; text-align: left; } .banner-box-right { right: 3%; text-align: right; } .mainpage-shadowbox { color: white; background: rgb(16,16,16); background: rgba(0,0,0,0.3); border-radius: 4px; } .mainpage-shadowbox h2, .mainpage-shadowbox h3 { color: white; border:none; font-family: sans-serif; line-height: 1.2em; margin:0; } .mainpage-shadowbox h2 { font-size: 190%; } .mainpage-shadowbox h3 { font-size: 150%; padding: 0; }	color: white; font-weight: bold; } .banner-box-2 { position: absolute; z-index: 2; margin-top: 2em; min-width: 20em; } .banner-box-2 .quote { font-size: 90%; line-height: 1.2em; }
 * 1) mainpage-maplinks a, .mainpage-shadowbox a {

/****************************** * Collapsible elements ******************************/ .mw-collapsible-toggle-default::before { content: '('; } .mw-collapsible-toggle-default::after {   content: ')'; } .mw-collapsible-toggle { float: right; padding: 2px 5px; }

/************************************************** * Styling for the timelines and on this day pages *************************************************/ table.timeline, table.timeline tbody { display: block; }

table.timeline tr { position: relative; margin-left: 8px; padding: 5px 20px 5px 12px; display: flex; flex-direction: column; border-top-right-radius: 10px; border-bottom-right-radius: 10px; }

table.timeline tr:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; display: block; width: 1px; background-color: #f7f7f7; }

table.timeline tr td { /*font-size: 1rem;*/ /*font-weight: var( --font-weight-semibold );*/ color: #202122; padding: 0 10px; }

table.timeline tr td:first-child:before { content: ""; width: 8px; height: 8px; display: block; background-color: #72777d; border-radius: 100%; position: absolute; left: -3.5px; margin-top: 8px; }

/*table.timeline tr td { padding: 0; }*/

table.timeline tr + tr { border-top: 0; }

/************************************************** * Styling for responsive flex boxes *************************************************/ /* * { box-sizing: border-box; } */

.flex-container { display: flex; flex-direction: row; }

.flex-item-1 { background-color: ; border:1px solid #f3f2f2; border-radius: 8px; box-shadow: 0 3px 6px #f2f2f2; padding: 10px; margin: 5px; flex: 33.3%; box-sizing: border-box; }

.flex-item-2 { background-color: ; border:1px solid #f3f2f2; border-radius: 8px; box-shadow: 0 3px 6px #f2f2f2; padding: 10px; margin: 5px; flex: 33.3%; box-sizing: border-box; }

.flex-item-3 { background-color: ; border:1px solid #f3f2f2; border-radius: 8px; box-shadow: 0 3px 6px #f2f2f2; padding: 10px; margin: 5px; flex: 33.3%; box-sizing: border-box; }

/* Responsive layout - makes a one column-layout instead of two-column layout */ @media (max-width: 900px) { .flex-container { flex-direction: column; } }

/********************************************************* * Styling for a responsive image gallery with 4 coloumns *********************************************************/ .row { display: flex; flex-wrap: wrap; padding: 0 5px; }

/* Create four equal columns that sits next to each other */ .column { flex: 25%; max-width: 23%; padding: 0 5px; }

.column img { margin-top: 8px; vertical-align: middle; }

/* Responsive layout - makes a two column-layout instead of four columns */ @media (max-width: 800px) { .column { flex: 50%; max-width: 48%; } }

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */ @media (max-width: 600px) { .column { flex: 100%; max-width: 100%; } }