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
	#. RESPONSIVE STYLES
=================================
*/

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

/* Custom Fonts */
@import url("https://kit.fontawesome.com/5840458732.js");

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

@font-face {
	font-family: 'CelestiaRedux';
	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;
}

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

:root {
	--pink: #FF8DC6;
	--purple: #A35C9E;
/* 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-dash: #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 2px var(--pink);
}

.article-table th {
	background-color: var(--pink);
	color: #fff;
	padding: 10px;
}
.article-table td {
    border-bottom: solid 2px var(--pink);
    padding: 10px;
}

/* Character table */
.twilight-table {
	border: 2px solid var(--twilight);
}

.twilight-table th {
	background: var(--twilight);
}

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

/*
.infobox th:first-of-type {
	font-size: 1.4em;
} */

.infobox th {
	background-color: var(--pink);
	color:#FFF;
	border-radius: 7px;
	text-align: center;
	font-size: 1.2em;
	padding: 10px 0;
}

.infobox td {
	padding: 0 10px;
}

/*
=================================
	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;}
.infobox .tabs { text-align: center; }
/*
=================================
	6. TEMPLATES
=================================
*/
.dialogue-container{
	display:flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 10px;
}
.character-icon {
	text-align: center;
	width: 100px;
}

.speechbubble {
	padding: 10px;
}

/* Notice */
.notice {
	display: grid;
	grid-template-columns: 100px auto;
	width: 90%;
	font-size: 1.2em;
	background: #eee;
	padding: 10px;
	margin: 0 auto;
}

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

/*
=================================
	#. RESPONSIVE STYLES
=================================
*/
@media only screen and (max-width: 900px) {
    .infobox {
       width: 100%;
       margin-left: 0;
       float: none;
   }
}