MediaWiki:Common.css

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

/* Table of Contents
=================================
	1. COMMON
	2. COLOR STYLES
	3. TABLE STYLES
	4. INFOBOX STYLES
	5. TABS STYLES
	6. TEMPLATES
	7. GRIDS AND FLEXBOX
	#. RESPONSIVE STYLES
=================================
*/

/*
=================================
	1. COMMON
=================================
*/

/* Custom Fonts */
/* ===================================================
*
*  Webfonts Title: CelestiaMediumRedux 
*  Author: Matty
*  URL: http://www.mattyhex.net
*
=================================================== */

@font-face {
	font-family: 'CelestiaRedux';
	font-display: swap;
	src: url("../fonts/CelestiaMediumRedux1.55.ttf");
}

/* 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.).
*/
.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;
}

/* After Cargo update 3.7, the tables are forced to fit to screen which is unreadable on smaller screens. This fixes it */
table.cargoDynamicTable {
	table-layout: auto!important;
}

/* Flexbox */
.flex-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

/*
=================================
	2. COLOR STYLES
=================================
*/

:root {
	--pink: #ff79a4; /* old: #FF8DC6; */
	--pink-light: #F9A1C9;
	--purple: #A35C9E;
	--text-shadow: 0px 1px rgba(0, 0, 0, 0.3);
/* Reference: MLP Vector Club (https://mlpvector.club/cg/pony) */
	--twilight: #CC9CDF;
	--twilight-dark: #A46BBD; 
	--applejack: #FABA62;
	--applejack-dark: #EF6F2F;
	--fluttershy: #FAF5AB;
	--fluttershy-dark: #E9D461;
	--pinkie: #F5B7D0;
	--pinkie-dark: #E880B0;
	--rainbow: #9BDBF5;
	--rainbow-dark: #6BABDA;
	--rarity: #EAEEF0;
	--rarity-dark: #BDC1C2;
	--spike: #C290C6;
	--spike-dark: #985E9F;
}

/*
=================================
	3. TABLE STYLES
=================================
*/

.article-table {
	border-collapse: collapse;
	border: solid 1px var(--pink);
	border-radius: 5px;
	overflow: hidden;
}

.article-table th {
	background-color: var(--pink);
	color: white;
    text-shadow: var(--text-shadow);
	padding: .70rem;
}

.article-table th a {color: #fff;}
.article-table td {
    border-top: solid 1px var(--pink);
    padding: .70rem;
}

/*.article-table tbody tr:hover {
    background-color: #fcfcfc;
}*/

.pinkcargo > table {
	border: 2px solid var(--pink);
	
}
.pinkcargo > table.cargoTable th {
	background-color: var(--pink);
	text-align: center;
}

.pinkcargo > table.cargoTable.noMerge tr:nth-child(odd), .pinkcargo > table.cargoTable.noMerge tr:nth-child(even) {
    background: none;
}

.pinkcargo > table.cargoTable td {
	border-bottom: 2px solid var(--pink);
}

/*
=================================
	4. INFOBOX STYLES
=================================
*/
.infobox {
	width: 290px;
	border: solid 2px var(--pink);
	border-radius: 10px;
	float: right;
	margin-left: 1em;
	margin-bottom: 1em;
	padding: 0;
	overflow: hidden;
}

.infobox th, .infobox__header {
	background-color: var(--pink);
	font-family: 'CelestiaRedux';
	text-shadow: var(--text-shadow);
	color: #fff;
	text-align: center;
	font-size: 1.4em;
	padding: 5px 0;
}

.infobox__singular { text-align: center; }
.infobox__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 10px;
}
.infobox__row, .infobox__singular {
	padding: 0.4em;
}

/* Adding this to overwrite Timeless Make the image fit the infobox (not sure if this do anything anymore */
.infobox .mw-file-element {
	max-width: 100%;
	height: auto;
} 

/* Portable infobox */
.portable-infobox {
   width: 300px;
}
.portable-infobox .pi-data-label {
   font-family: sans-serif;
   font-weight: normal;
}

.portable-infobox .pi-title {
	text-align: center;
	font-size: 1.7em;
	font-family: 'CelestiaRedux';
	border-radius: 5px 5px 0 0;
	background-color: var(--twilight);
	color: #000;
	padding: 0.4em;
}
.portable-infobox .pi-header {
	background-color: var(--pink-light);
	text-align: center;
	font-size: 1.5em;
	font-family: 'CelestiaRedux';
	font-weight: normal;
	color: #000;
	padding: 0.4em;
}
.portable-infobox .wds-tabs {
    justify-content: center;
}

.portable-infobox .pi-wds-tab__content {
	max-width:100%;
	height: auto;
}
/*
=================================
	5. TABS STYLES
=================================
*/
.tabs-tabbox > .tabs-label {
    margin: 2px;
    border-bottom: none;
    border-radius: 5px;
}

.tabs-label {
    cursor: pointer;
    padding: 5px 16px;
    background-color: var(--purple);
    border: none;
    font-weight: bold;
    color: #fff;
}

.tabs-tabbox > .tabs-input:checked + .tabs-label, .tabs-input-0:checked + .tabs-input-1 + .tabs-label {
    background-color: var(--pink);
}

.tabs-tabbox > .tabs-container {border: none;}

.custom-tabs {
	display: flex;
	gap: 5px;
	width: 100%;
	margin-bottom: 15px;
	flex-wrap: wrap;
	justify-content: space-evenly;
}

.custom-tabs > span {
	border-radius: 4px;
	display: flex;
	align-items: center;
	text-align: center;
    font-weight: bold;
	justify-content: center;
	flex: 1;
	background-color: #ffb7ca;
}

.custom-tabs a {
	display: flex;
	width: 100%;
	height: 100%;
	padding: 8px 10px;
	border-radius: 4px;
	align-items: center;
    color: #000;
    text-align: center;
	justify-content: center;
	font-size: 1.2em;
}

.custom-tabs a:hover {
    text-decoration: none;
    color: #000;
}

.custom-tabs > span > .mw-selflink.selflink {
    background-color: #ff6f96;
}

.custom-tabs span:hover {
	background-color: #fff7f9;
}

.infobox .tabber__header { text-align: center; }
/*
=================================
	6. TEMPLATES
=================================
*/
.dialogue-container{
	display: grid;
	grid-template-columns: 95px auto;
	align-items: center;
	margin-bottom: 10px;
	column-gap: 10px;
}
.character-icon {
	text-align: center;
}

.speechbubble {
	position: relative;
	padding: 10px;
	background-color: #eee;
	color: #000;
	border-radius: 10px;
}

/* Adding contrast to links */
.speechbubble > a {color: var(--purple);}

/* This needs adjusting display a bubble arrow */
.speech-bubble:after {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-right-color: #eee;
	border-left: 0;
	border-top: 0;
	margin-top: -10px;
	margin-left: -20px;
}

/* Notice */
.notice {
	display: flex;
	align-items: center;
	padding: .75rem 1.25rem;
	max-width: 600px;
    margin: 1em auto;
    border-radius: .25rem;
    text-align: center;
}
/* Reminder to check colours later for contrast 2025-12-05 */
.stub {
	color: #fff;
    background-color: #563861;
}

.notice a {
	color: #FE92F6;
	font-weight: bold;
}
.warning {
	color: #fff;
    background-color: #384661;
}

.notice-image {
	margin-right: 10px;
}

.module {
	max-width: 600px;
	margin: 0 auto;
	text-align: center;
}

.mpbox {
	text-align: center;
	margin-bottom: 18px;
}
.mpbox h1 {
	background: var(--pink);
	color: #fff;
	text-shadow: var(--text-shadow);
	padding: 7px;
	margin: 0;
	border-radius: 10px;
	border-bottom: none;
	font-size: 2em;
	font-family: CelestiaRedux;
}

.mpbox > div {padding: 1em}

.siegestage {
	max-width: 600px;
	margin-bottom: 5px;
}

.siegeheader {
	background: var(--pink);
	color: #fff;
	text-shadow: var(--text-shadow);
	padding: 14px;
	text-align: center;
	font-weight: bold;
	font-size: 1.1em;
	margin-bottom: 8px;
}

.quest {
	display: grid;
	grid-template-columns: 300px 1fr;
	justify-content: center;
	gap: 1em;
	margin-bottom: 2em;
}

.quest .intro {
	position: relative;
	background-color: #eee;
	color: #000;
	border-radius: .4em;
	padding: 20px;
}
.intro > a {color: var(--purple);}

.quest .intro:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 55%;
	width: 0;
	height: 0;
	border: 30px solid transparent;
	border-top-color: #eee;
	border-bottom: 0;
	border-left: 0;
	margin-left: 30px;
	margin-bottom: -25px
}
.quest .title {
	width: 100%;
	background: var(--pink);
	color: #fff;
	text-shadow: var(--text-shadow);
	padding: 10px 0;
	border-radius: 15px 15px 0 0;
	text-align: center;
	font-family: 'CelestiaRedux';
	font-size: 2em;
}

.quest .rewards {
	border-top: 2px dotted var(--pink);
	padding-top: 7px;
	margin: 5px 0;
	text-align: center;
}

/*
=================================
	7. GRID AND FLEXBOX
=================================
*/
.grid-2 {
	display: grid;
	grid-template-columns: auto auto;
	padding-top: 7px;
	gap: 1em;
}

.grid-3 {
	display: grid;
	grid-template-columns: auto auto auto;
	padding-top: 7px;
}

.flex-row-reverse {
	display: flex;
	flex-direction: column;
	gap: 2em;
}

.flex-house {
	display: flex;
	flex-wrap: wrap-reverse;
	align-items: center;
	justify-content: center;
	gap: 1em;
}
.flex-house > div {
	flex: 1;
}
/* Tooltip container  */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted var(--pink);
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 180px;
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 5px;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 9999;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/*
=================================
	#. RESPONSIVE STYLES
=================================
*/
/* Phone */
@media screen and (max-width: 600px) {
    .infobox {
       width: 100%;
       margin-left: 0;
       float: none;
   }
   .siegestage {width: 100%;}
   
   .grid-2, .grid-3 {
   grid-template-columns: 1fr;
   margin: 0 auto;
   }
   
   .flex-row-reverse {
   	flex-direction: row;
   	margin: 1em auto;
   }
   
   .quest {
   	grid-template-columns: auto;
   	justify-content: center;
   	gap: 5px;
   }
}