The Lonsdale Battalion

MediaWiki:Common.css: Difference between revisions

Message Discussion

MediaWiki:Common.css (view source)

Revision as of 12:36, 25 April 2024

7,867 bytes added ,  25 days ago
image border radius
m (bullets)
(image border radius)
 
(40 intermediate revisions by 3 users not shown)
Line 1:
/* CSS placed here will be applied to all skins */
 
/******************************
* Hide items on main page
Line 11 ⟶ 10:
 
/******************************
* Hide category header 3
* Changing the tagline
******************************/
.mw-category-generated h3 {
#siteSub {
display:block; none;
}
font-weight:normal;
 
font-size:90%;
/* The transcription progress bar */
.pr_quality {
width:20%;
border-spacing: 1px;
border: 1px solid #ccc;
font-size: 1.5em;
}
 
#contentSub {
margin: 0 0 1.5em 0;
}
 
#navigationHeader {
display: table;
border-collapse: collapse;
border-spacing: 0;
empty-cells: hide;
margin: 0 auto 4px auto;
width: 100%;
}
 
/*****************************************
* 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
* Changing the font family
******************************/
 
#bodyContent {
@media all and (min-width: 768px) {
font-family: 'Raleway', sans-serif;
.lonsdale-mainpage-column {
font-size: 0.875em;
float: left;
font-weight:300;
width: 50%;
}
}
.firstHeading {
.lonsdale-mainpage-column-first {
font-family: 'Helvetica Neue', sans-serif;
padding-right: 10px;
}
.lonsdale-mainpage-column-second {
padding-left: 10px;
}
.lonsdale-mainpage-sister-projects {
text-align: center;
}
}
 
/******************************
h1, h2, h3, h4, h5, h6 {
* Columns for soldier pages
font-family: 'Times', serif;
******************************/
line-height: 1em;
 
color: #4c4c4c;
@media all and (min-width: 768px) {
.soldier-column {
float:left;
width:50%;
}
.soldier-column-first {
padding-right:10px;
}
.soldier-column-second {
padding-left:10px;
}
}
 
/******************************
p {
* To make images responsive
font-size: 1em;
******************************/
font-weight: 300;
.res-img img {
letter-spacing: 0;
max-width:100%;
font-family: 'Raleway', sans-serif;
height:auto;
margin-bottom:0.2em;
text-align:center;
border-radius:10px;
}
 
.res-img-800 img {
a {
display: block;
font-family: 'Raleway', sans-serif;
margin-left: auto;
margin-right: auto;
max-width:100%;
width:800px;
height:auto;
margin-bottom:0.2em;
text-align:center;
border-radius:10px;
}
 
.res-img-1000 img {
li {
display: block;
font-size: 1em;
fontmargin-weightleft: 300auto;
margin-right: auto;
max-width:100%;
width:1000px;
height:auto;
margin-bottom:0.2em;
text-align:center;
border-radius:10px;
}
 
.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;
border-radius:10px;
}
 
/****************************************************
* To hide wikisource proofread icons on index pages
****************************************************/
.mw-indicators.mw-body-content {
display: none;
}
 
/******************************
* Blockquotes
* Font-size in text editor
******************************/
blockquote {
#wpTextbox1 {
color: #222;
font-size:1.15em;
border-left: 3px solid #ddd;
}
 
/******************************
* Wikitables
* Make references smaller
******************************/
/*table.wikitable {
ol.references,
background-color: #f8f9fa;
div.reflist,
color: #222;
div.refbegin {
margin: 1em 0;
font-size: 90%; /* Default font-size */
border: 1px solid #a3a9b1;
margin-bottom: 0.5em;
border-collapse: collapse;
}
 
div.refbegin-100 {
table.wikitable > tr > th,
font-size: 100%; /* Option for normal fontsize in {{refbegin}} */
table.wikitable > tr > td,
table.wikitable > * > tr > th,
table.wikitable > * > tr > td {
border: 1px solid #a3a9b1;
padding: 0.2em 0.4em;
}
 
div.reflist ol.references {
table.wikitable > tr > th,
font-size: 100%; /* Reset font-size when nested in div.reflist */
table.wikitable > * > tr > th {
list-style-type: inherit; /* Enable custom list style types */
background-color: #eaecf0;
text-align: center;
}
 
table.wikitable > caption {
font-weight: bold;
}*/
 
/******************************
* Basictable of plain white
* Footer image & positioning
for clean look general use
******************************/
table.basictable {
div#footer {
background-color: #fff;
background-image: url(https://static.miraheze.org/thelonsdalebattalionwiki/d/da/Header-silhouette.png);
color: #444;
background-repeat: repeat-x;
margin: 0;
background-position: 100% 100%; /*100% 120%*/
border: 1px solid #fff;
background-color: #ffffff;
text-align: left;
height: 22em; /*18em*/
margin: 0;
padding: .5em 0 0 0;
}
 
table.basictable > tr > th,
#footer #footer-icons {
table.basictable > tr > td,
margin-top:14.6em;
table.basictable > * > tr > th,
margin-right: .5em;
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;
}
 
/******************************
* StylesInfotable for mobileinfoboxes main page
on soldier pages
******************************/
table.infotable {
background-color: #f7f7f7;
color: #444;
margin: 0;
border: 3px solid #fff;
text-align: left;
}
 
table.infotable > tr > th,
@media all and (min-width: 768px) {
table.infotable > tr > td,
.lonsdale-mainpage-column {
table.infotable > * > tr > th,
float: left;
table.infotable > * > tr > td {
width: 50%;
background-color: #f7f7f7;
}
border: none;
.lonsdale-mainpage-column-first {
padding-right: 5px0.15em;
text-align: left;
}
.lonsdale-mainpage-column-second {
padding-left: 5px;
}
.lonsdale-mainpage-sister-projects {
text-align: center;
}
}
 
table.infotable > tr > th,
/* Default style for navigation boxes */
table.infotable > * > tr > th {
.navbox { /* Navbox container style */
background-color: #1b9591;
box-sizing: border-box;
text-align: center;
border: 1px solid #aaa;
widthcolor: 100%#fff;
padding: 10px 5px;
clear: both;
font-size: 88%;
text-align: center;
padding: 1px;
margin: 1em auto 0; /* Prevent preceding content from clinging to navboxes */
}
 
.navbox .navbox {
table.infotable > caption {
margin-top: 0; /* No top margin for nested navboxes */
font-weight: bold;
}
 
.navbox + .navbox {
/*********************************
margin-top: -1px; /* Single pixel border between adjacent navboxes */
* 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;
}
 
.navbox-inner,
table.remtable > tr > th,
.navbox-subgroup {
table.remtable > tr > td,
width: 100%;
table.remtable > * > tr > th,
table.remtable > * > tr > td {
background-color: #f7f7f7;
border: 1px solid #fff;
padding: 0.2em 0.4em;
text-align: left;
}
 
.navbox-group,
table.remtable > tr > th,
.navbox-title,
table.remtable > * > tr > th {
.navbox-abovebelow {
background-color: #f7f7f7;
padding: 0.25em 1em; /* Title, group and above/below styles */
linetext-heightalign: 1.5emcenter;
text-align: center;
}
 
th.navbox-group { /* Group style */
table.remtable > caption {
white-space: nowrap;
font-weight: bold;
/* @noflip */
text-align: right;
}
 
.navbox,
/******************************
.navbox-subgroup {
* Pivot-table used on the
background: #fdfdfd; /* Background color */
transcribing projects page
******************************/
table.pivot-table {
background-color: #f2f2f2;
color: #444;
margin: 1em 0;
border: 1px solid #fff;
text-align: center;
}
 
.navbox-list {
table.pivot-table > tr > th,
line-height: 1.5em;
table.pivot-table > tr > td,
border-color: #fdfdfd; /* Must match background color */
table.pivot-table > * > tr > th,
table.pivot-table > * > tr > td {
border: 2px solid #fff;
padding: 0.4em;
text-align: center;
}
 
.navbox th,
table.pivot-table > tr > th,
.navbox-title {
table.pivot-table > * > tr > th {
background: #ccccff; /* Level 1 color */
background-color: #517398;
text-align: center;
color: #fff;
padding: 10px 5px;
}
 
.navbox-abovebelow,
table.pivot-table > caption {
th.navbox-group,
font-weight: bold;
.navbox-subgroup .navbox-title {
background: #ddddff; /* Level 2 color */
}
 
.navbox-subgroup .navbox-group,
/******************************
.navbox-subgroup .navbox-abovebelow {
* diarytable used on war
background: #e6e6ff; /* Level 3 color */
diary transcriptions pages
******************************/
table.diarytable {
background-color: #f2f2f2;
color: #444;
margin: 1em 0;
border: 1px solid #fff;
text-align: center;
}
 
.navbox-even {
table.diarytable > tr > th,
background: #f7f7f7; /* Even row striping */
table.diarytable > tr > td,
table.diarytable > * > tr > th,
table.diarytable > * > tr > td {
border: 2px solid #fff;
padding: 0.3em;
text-align: center;
}
 
.navbox-odd {
table.diarytable > tr > th,
background: transparent; /* Odd row striping */
table.diarytable > * > tr > th {
background-color: #444;
text-align: center;
color: #fff;
padding: 10px 5px;
}
 
.navbox .hlist td dl,
table.diarytable > caption {
.navbox .hlist td ol,
font-weight: bold;
.navbox .hlist td ul,
.navbox td.hlist dl,
.navbox td.hlist ol,
.navbox td.hlist ul {
padding: 0.125em 0; /* Adjust hlist padding in navboxes */
}
 
/******************************
/* Default styling for Navbar template */
* Great War periodicals table
.navbar {
******************************/
display: inline;
table.gwptable {
font-size: 88%;
fontbackground-weightcolor: normal#f8f9fa;
color: #444;
margin: 1em 0;
border: 1px solid #fff;
text-align: center;
}
 
.navbar ul {
table.gwptable > tr > th,
display: inline;
table.gwptable > tr > td,
white-space: nowrap;
table.gwptable > * > tr > th,
table.gwptable > * > tr > td {
border: 1px solid #fff;
padding: 0.2em 0.4em;
text-align: center;
}
 
.mw-body-content .navbar ul {
table.gwptable > tr > th,
line-height: inherit;
table.gwptable > * > tr > th {
background-color: #eaecf0;
text-align: center;
}
 
.navbar li {
table.gwptable > caption {
word-spacing: -0.125em;
font-weight: bold;
}
 
.navbar.mini li abbr[title] {
/******************************
font-variant: small-caps;
* Page Index table
border-bottom: none;
******************************/
text-decoration: none;
table.page-index-table {
cursor: inherit;
background-color: #f8f9fa;
color: #444;
margin: 1em 0;
border: 1px solid #fff;
text-align: center;
}
 
/* Navbar styling when nested in infobox and navbox */
table.page-index-table > tr > th,
.infobox .navbar {
table.page-index-table > tr > td,
font-size: 100%;
table.page-index-table > * > tr > th,
table.page-index-table > * > tr > td {
border: 1px solid #fff;
padding: 0.2em 0.4em;
text-align: center;
}
 
.navbox .navbar {
table.page-index-table > tr > th,
display: block;
table.page-index-table > * > tr > th {
font-size: 100%;
background-color: #eaecf0;
text-align: center;
}
 
.navbox-title .navbar {
table.page-index-table > caption {
/* @noflip */
floatfont-weight: leftbold;
/* @noflip */
text-align: left;
/* @noflip */
margin-right: 0.5em;
width: 6em;
}
 
/******************************
/* 'show'/'hide' buttons created dynamically by the CollapsibleTables javascript
* Roll of Honour table
in [[MediaWiki:Common.js]] are styled here so they can be customised. */
******************************/
.collapseButton {
table.rohtable {
/* @noflip */
background-color: #f2f2f2;
float: right;
font-weightcolor: normal#444;
margin: 1em 0;
/* @noflip */
border: 1px solid #fff;
margin-left: 0.5em;
text-align: left;
/* @noflip */
text-align: right;
width: auto;
}
 
/* In navboxes, the show/hide button balances the v·d·e links
table.rohtable > tr > th,
from [[Template:Navbar]], so they need to be the same width. */
table.rohtable > tr > td,
.navbox .collapseButton {
table.rohtable > * > tr > th,
width: 6em;
table.rohtable > * > tr > td {
border: 2px solid #fff;
padding: 0.4em;
text-align: left;
}
 
table.rohtable > tr > th,
/* Styling for JQuery makeCollapsible, matching that of collapseButton */
table.rohtable > * > tr > th {
.mw-collapsible-toggle {
fontbackground-weightcolor: normal#50ab8a;
text-align: center;
/* @noflip */
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 {
.navbox .mw-collapsible-toggle {
color: white;
width: 6em;
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;
}
#mainpage-maplinks a, .mainpage-shadowbox a {
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;
}
 
/******************************
* Collapsible elements
* Bullets
******************************/
.mw-collapsible-toggle-default::before {
ul {
content: '(';
list-style-type: disc;
}
list-style-image: none;
.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%;
}
}
Retrieved from "https://thelonsdalebattalion.co.uk/wiki/Special:MobileDiff/1904...46247"