MediaWiki:Common.css

/* CSS placed here will be applied to all skins */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500&family=Roboto+Condensed&family=Source+Sans+Pro:wght@300;400;600&display=swap'); /* fonts */

body { font-family: 'Source Sans Pro', sans-serif; }

.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6, .mw-body udt { font-family: 'Archivo', sans-serif !important; }

/************** One-sided navigation menu *****************/

@media (min-width: 1340px) { #mw-content-block { display: block; }	#mw-content, #content-bottom-stuff { margin-left: 14em; }	#mw-content-wrapper { float: right; margin-left: -14em; width: 100%; }	#mw-related-navigation { width: 14em; padding: 0 1em 0 0; }	div.color-middle { margin-right: 0; }	.mw-wiki-logo { display: inline-block; } }

/* Align top colour bar with page columns */

.ts-inner { padding: 0 0 0 1em; }

/* Re-aligning bottom logos */

padding-right: 1em; }
 * 1) footer {

/************** Top bar font modernization **************/

font-family: 'Source Sans Pro', sans-serif }
 * 1) mw-header *, #mw-site-navigation *, #mw-related-navigation * {

/* Avoid cutting off letters with descenders: g,j,p,q,y */

height: 1.5em; position: relative; bottom: 0.1em }
 * 1) personal h2 span {

/* Triangle position patch */

position: relative; bottom: 0.5em; }
 * 1) personal h2::after {

/************** background image **************/

background-image: url(https://static.miraheze.org/tomorrowxtogetherwiki/5/5e/Test-bg.png) !important; background-position: center center !important; background-attachment: fixed !important; background-repeat: repeat !important; }
 * 1) mw-content-container {

/************** logo **************/

.mw-wiki-logo { background-image: url(https://static.miraheze.org/tomorrowxtogetherwiki/4/4b/Txt-logo-sq.jpg); background-size: cover !important; border-radius: 5%; border: 2px solid #cfcfcf; }

/************** logo text **************/

font-family: 'Roboto Condensed', sans-serif; text-transform: uppercase; font-size: 1.05em; line-height: 1.2; letter-spacing: 1px; }
 * 1) p-logo-text a.long {

/************* The Grids *************/ .discography-grid, .profile-grid { display: grid; grid-gap: 0.5em; max-width: 1200px; margin: 0 auto; grid-template-columns: 1fr; }

.profile-grid { max-width: 800px; }

.discography-grid-img, .profile-grid-img { text-align: center; margin: auto; padding: 1em; }

.discography-grid-img img, .profile-grid-img img { width: 100%; height: auto; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; }

.discography-grid-info, .profile-grid-info { padding: 1em; }

.discography-grid-info .wikitable, .profile-grid-info .wikitable { width: 100%; }

.performance-table td:first-child, .varietyshow-table td:first-child { text-align:left; width: 25%; }

.performance-table, .varietyshow-table { max-width:680px; }

/*************** Infoboxes ***************/ .infobox { float: right; clear: right; margin-bottom: 0.5em; margin-left: 1em; padding: 0.2em; border: 1px solid #a2a9b1; background: #fff; color: black; }

.infobox td, .infobox th { vertical-align: top; padding: 5px; }

.infobox caption { margin-left: inherit; font-size: larger; }

.infobox.bordered { border-collapse: collapse; }

.infobox.bordered td, .infobox.bordered th { border: 1px solid #a2a9b1; }

.infobox.bordered .borderless td, .infobox.bordered .borderless th { border: 0; }

.infobox th[scope=row] { text-align: right; width: 35%; }

.infobox th.info-header { text-align:center; background-color: #f8f9fa; padding:0.65em; margin: 5px; }

@media (max-width: 719px) { /* high specificity to ensure specific infoboxes won't override these * properties with their own tstyles inadvertently */ body.mediawiki .infobox { float: none; clear: both; width: 100%; margin: 0 auto; } }

/*************** NavMain styling ***************/ .navmain { width: 99%; background-color:#fff; margin:0 auto; }

.navmain .navheader { background-color: lavender; font-size:110%; }

.navmain .navlabel { width: 12%; background-color:#f8f9fa; text-align: right; font-weight:bold; }

/*************** Video gallery for YT embeds ***************/ .vid-gallery { display:flex; gap: 15px; flex-wrap: wrap; text-align: center; }

@media (min-width: 600px) { .discography-grid { grid-template-columns: 1fr 2fr; }

.profile-grid { grid-template-columns: 1fr 1fr; } }

@media (min-width: 1023px) { .discography-grid { grid-template-columns: 1fr 3fr; } }