MediaWiki:Common.css

From Fanon Wiki

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/* Fanon Wiki Common CSS */
/* The styles here are to be asmlied on all skins, so it's preferrable to have things that are "universal", such as utilities, rather than specific styles */
/* The fonts can be uploaded later to the server. When done, please remove these imports */
@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,800;1,800&display=swap'); /* EXO-2 */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); /* Roboto */

:root {
	/* Colors */
		/* Logo colors */
    		--red: #ff4242;
    		--yellow: #f5ff42;
    		--blue: #4292ff;
    		--green: #42ff44;
        /* Layout colors */
            --bg-color: #e8f5e8;
			--link-color: #015fde;
		/* Other colors */
			--lightgray: #bebebe;
	/* Fonts */
		/* Font definitions */
			--sans-serif: 'Roboto', system-ui, sans-serif;
			--title: 'Exo 2', 'Roboto', serif;
			--monospace: monospace;
		--font-default: 13pt var(--sans-serif);
}

/* Border box */
*, *::after, *::before {
	box-sizing: border-box;
}

/* Grid system */
.row {
	display: flex;
	flex-wrap: wrap;
}

	/* Grid columns */
	.col {
		flex: 1 0 0%;
	}
	
	.col-auto {
		flex: 0 0 auto;
		width: auto;
	}
	
	.col-1 {
		flex: 0 0 auto;
		width: 8.33333333%;
	}
	
	.col-2 {
		flex: 0 0 auto;
		width: 16.66666667%;
	}
	
	.col-3 {
		flex: 0 0 auto;
		width: 25%;
	}
	
	.col-4 {
		flex: 0 0 auto;
		width: 33.33333333%;
	}
	
	.col-5 {
		flex: 0 0 auto;
		width: 41.66666667%;
	}
	
	.col-6 {
		flex: 0 0 auto;
		width: 50%;
	}
	
	.col-7 {
		flex: 0 0 auto;
		width: 58.33333333%;
	}
	
	.col-8 {
		flex: 0 0 auto;
		width: 66.66666667%;
	}
	
	.col-9 {
		flex: 0 0 auto;
		width: 75%;
	}
	
	.col-10 {
		flex: 0 0 auto;
		width: 83.33333333%;
	}
	
	.col-11 {
		flex: 0 0 auto;
		width: 91.66666667%;
	}
	
	.col-12 {
		flex: 0 0 auto;
		width: 100%;
	}
	
	@media (min-width: 576px) {
		.col-sm {
			flex: 1 0 0%;
		}
	
		.col-sm-auto {
			flex: 0 0 auto;
			width: auto;
		}
		
		.col-sm-1 {
			flex: 0 0 auto;
			width: 8.33333333%;
		}
		
		.col-sm-2 {
			flex: 0 0 auto;
			width: 16.66666667%;
		}
		
		.col-sm-3 {
			flex: 0 0 auto;
			width: 25%;
		}
		
		.col-sm-4 {
			flex: 0 0 auto;
			width: 33.33333333%;
		}
		
		.col-sm-5 {
			flex: 0 0 auto;
			width: 41.66666667%;
		}
		
		.col-sm-6 {
			flex: 0 0 auto;
			width: 50%;
		}
		
		.col-sm-7 {
			flex: 0 0 auto;
			width: 58.33333333%;
		}
		
		.col-sm-8 {
			flex: 0 0 auto;
			width: 66.66666667%;
		}
		
		.col-sm-9 {
			flex: 0 0 auto;
			width: 75%;
		}
		
		.col-sm-10 {
			flex: 0 0 auto;
			width: 83.33333333%;
		}
		
		.col-sm-11 {
			flex: 0 0 auto;
			width: 91.66666667%;
		}
		
		.col-sm-12 {
			flex: 0 0 auto;
			width: 100%;
		}
	}
	
		@media (min-width: 768px) {
		.col-md {
			flex: 1 0 0%;
		}
	
		.col-md-auto {
			flex: 0 0 auto;
			width: auto;
		}
		
		.col-md-1 {
			flex: 0 0 auto;
			width: 8.33333333%;
		}
		
		.col-md-2 {
			flex: 0 0 auto;
			width: 16.66666667%;
		}
		
		.col-md-3 {
			flex: 0 0 auto;
			width: 25%;
		}
		
		.col-md-4 {
			flex: 0 0 auto;
			width: 33.33333333%;
		}
		
		.col-md-5 {
			flex: 0 0 auto;
			width: 41.66666667%;
		}
		
		.col-md-6 {
			flex: 0 0 auto;
			width: 50%;
		}
		
		.col-md-7 {
			flex: 0 0 auto;
			width: 58.33333333%;
		}
		
		.col-md-8 {
			flex: 0 0 auto;
			width: 66.66666667%;
		}
		
		.col-md-9 {
			flex: 0 0 auto;
			width: 75%;
		}
		
		.col-md-10 {
			flex: 0 0 auto;
			width: 83.33333333%;
		}
		
		.col-md-11 {
			flex: 0 0 auto;
			width: 91.66666667%;
		}
		
		.col-md-12 {
			flex: 0 0 auto;
			width: 100%;
		}
	}
	
		@media (min-width: 992px) {
		.col-lg {
			flex: 1 0 0%;
		}
	
		.col-lg-auto {
			flex: 0 0 auto;
			width: auto;
		}
		
		.col-lg-1 {
			flex: 0 0 auto;
			width: 8.33333333%;
		}
		
		.col-lg-2 {
			flex: 0 0 auto;
			width: 16.66666667%;
		}
		
		.col-lg-3 {
			flex: 0 0 auto;
			width: 25%;
		}
		
		.col-lg-4 {
			flex: 0 0 auto;
			width: 33.33333333%;
		}
		
		.col-lg-5 {
			flex: 0 0 auto;
			width: 41.66666667%;
		}
		
		.col-lg-6 {
			flex: 0 0 auto;
			width: 50%;
		}
		
		.col-lg-7 {
			flex: 0 0 auto;
			width: 58.33333333%;
		}
		
		.col-lg-8 {
			flex: 0 0 auto;
			width: 66.66666667%;
		}
		
		.col-lg-9 {
			flex: 0 0 auto;
			width: 75%;
		}
		
		.col-lg-10 {
			flex: 0 0 auto;
			width: 83.33333333%;
		}
		
		.col-lg-11 {
			flex: 0 0 auto;
			width: 91.66666667%;
		}
		
		.col-lg-12 {
			flex: 0 0 auto;
			width: 100%;
		}
	}

/* Gaps */
.gap-0 {
	gap: 0;
}

.gap-1 {
	gap: .25rem;
}

.gap-2 {
	gap: .5rem;
}

.gap-3 {
	gap: 1rem;
}

	/* X-axis specific */
	.gap-x-0 {
		column-gap: 0;
	}

	.gap-x-1 {
		column-gap: .25rem;
	}
	
	.gap-x-2 {
		column-gap: .5rem;
	}
	
	.gap-x-3 {
		column-gap: 1rem;
	}

	/* Y-axis specific */
	.gap-y-0 {
		row-gap: 0;
	}

	.gap-y-1 {
		row-gap: .25rem;
	}
	
	.gap-y-2 {
		row-gap: .5rem;
	}
	
	.gap-y-3 {
		row-gap: 1rem;
	}

/* Border radius */
.br-0 {
	border-radius: 0;
}

.br-1 {
	border-radius: .25rem;
}

.br-2 {
	border-radius: .5rem;
}

.br-3 {
	border-radius: 1rem;
}

.br-4 {
	border-radius: 50px;
}

.br-5 {
	border-radius: 100%;
}

/* Displays */
.d-inline {
	display: inline!important;
}

.d-inline-block {
	display: inline-block!important;
}

.d-block {
	display: block!important;
}

.d-grid {
	display: grid!important;
}

.d-table {
	display: table!important;
}

.d-table-row {
	display: table-row!important;
}

.d-table-cell {
	display: table-cell!important;
}

.d-flex {
	display: flex!important;
}

.d-inline-flex {
	display: inline-flex!important;
}

.d-none {
	display: none!important;
}

	/* Different screen sizes */
	@media (min-width: 576px) {
		.d-sm-inline {
			display: inline!important;
		}
		
		.d-sm-inline-block {
			display: inline-block!important;
		}
		
		.d-sm-block {
			display: block!important;
		}
		
		.d-sm-grid {
			display: grid!important;
		}
		
		.d-sm-table {
			display: table!important;
		}
		
		.d-sm-table-row {
			display: table-row!important;
		}
		
		.d-sm-table-cell {
			display: table-cell!important;
		}
		
		.d-sm-flex {
			display: flex!important;
		}
		
		.d-sm-inline-flex {
			display: inline-flex!important;
		}
		
		.d-sm-none {
			display: none!important;
		}
	}
	
	@media (min-width: 768px) {
		.d-md-inline {
			display: inline!important;
		}
		
		.d-md-inline-block {
			display: inline-block!important;
		}
		
		.d-md-block {
			display: block!important;
		}
		
		.d-md-grid {
			display: grid!important;
		}
		
		.d-md-table {
			display: table!important;
		}
		
		.d-md-table-row {
			display: table-row!important;
		}
		
		.d-md-table-cell {
			display: table-cell!important;
		}
		
		.d-md-flex {
			display: flex!important;
		}
		
		.d-md-inline-flex {
			display: inline-flex!important;
		}
		
		.d-md-none {
			display: none!important;
		}
	}
	
	@media (min-width: 992px) {
		.d-lg-inline {
			display: inline!important;
		}
		
		.d-lg-inline-block {
			display: inline-block!important;
		}
		
		.d-lg-block {
			display: block!important;
		}
		
		.d-lg-grid {
			display: grid!important;
		}
		
		.d-lg-table {
			display: table!important;
		}
		
		.d-lg-table-row {
			display: table-row!important;
		}
		
		.d-lg-table-cell {
			display: table-cell!important;
		}
		
		.d-lg-flex {
			display: flex!important;
		}
		
		.d-lg-inline-flex {
			display: inline-flex!important;
		}
		
		.d-lg-none {
			display: none!important;
		}
	}

/* Flex utilities */
.flex-wrap {
	flex-wrap: wrap;
}

.flex-nowrap {
	flex-wrap: nowrap;
}

.flex-wrap-reverse {
	flex-wrap: wrap-reverse;
}

.justify-content-start {
	justify-content: flex-start !important;
}

.justify-content-end {
	justify-content: flex-end !important;
}

.justify-content-center {
	justify-content: center !important;
}

.justify-content-between {
	justify-content: space-between !important;
}

.justify-content-around {
	justify-content: space-around !important;
}

.justify-content-evenly {
	justify-content: space-evenly !important;
}

.align-items-start {
	align-items: flex-start !important;
}

.align-items-end {
	align-items: flex-end !important;
}

.align-items-center {
	align-items: center !important;
}

.align-items-baseline {
	align-items: baseline !important;
}

.align-items-stretch {
	align-items: stretch !important;
}

.align-content-start {
	align-content: flex-start !important;
}

.align-content-end {
	align-content: flex-end !important;
}

.align-content-center {
	align-content: center !important;
}

.align-content-between {
	align-content: space-between !important;
}

.align-content-around {
	align-content: space-around !important;
}

.align-content-stretch {
	align-content: stretch !important;
}

.align-self-auto {
	align-self: auto !important;
}

.align-self-start {
	align-self: flex-start !important;
}

.align-self-end {
	align-self: flex-end !important;
}

.align-self-center {
	align-self: center !important;
}

.align-self-baseline {
	align-self: baseline !important;
}

.align-self-stretch {
	align-self: stretch !important;
}

	/* Different screen sizes */
	@media (min-width: 576px) {
		.justify-content-sm-start {
			justify-content: flex-start !important;
		}
		
		.justify-content-sm-end {
			justify-content: flex-end !important;
		}
		
		.justify-content-sm-center {
			justify-content: center !important;
		}
		
		.justify-content-sm-between {
			justify-content: space-between !important;
		}
		
		.justify-content-sm-around {
			justify-content: space-around !important;
		}
		
		.justify-content-sm-evenly {
			justify-content: space-evenly !important;
		}
		
		.align-items-sm-start {
			align-items: flex-start !important;
		}
		
		.align-items-sm-end {
			align-items: flex-end !important;
		}
		
		.align-items-sm-center {
			align-items: center !important;
		}
		
		.align-items-sm-baseline {
			align-items: baseline !important;
		}
		
		.align-items-sm-stretch {
			align-items: stretch !important;
		}
		
		.align-content-sm-start {
			align-content: flex-start !important;
		}
		
		.align-content-sm-end {
			align-content: flex-end !important;
		}
		
		.align-content-sm-center {
			align-content: center !important;
		}
		
		.align-content-sm-between {
			align-content: space-between !important;
		}
		
		.align-content-sm-around {
			align-content: space-around !important;
		}
		
		.align-content-sm-stretch {
			align-content: stretch !important;
		}
		
		.align-self-sm-auto {
			align-self: auto !important;
		}
		
		.align-self-sm-start {
			align-self: flex-start !important;
		}
		
		.align-self-sm-end {
			align-self: flex-end !important;
		}
		
		.align-self-sm-center {
			align-self: center !important;
		}
		
		.align-self-sm-baseline {
			align-self: baseline !important;
		}
		
		.align-self-sm-stretch {
			align-self: stretch !important;
		}
	}
	
	@media (min-width: 768px) {
		.justify-content-md-start {
			justify-content: flex-start !important;
		}
		
		.justify-content-md-end {
			justify-content: flex-end !important;
		}
		
		.justify-content-md-center {
			justify-content: center !important;
		}
		
		.justify-content-md-between {
			justify-content: space-between !important;
		}
		
		.justify-content-md-around {
			justify-content: space-around !important;
		}
		
		.justify-content-md-evenly {
			justify-content: space-evenly !important;
		}
		
		.align-items-md-start {
			align-items: flex-start !important;
		}
		
		.align-items-md-end {
			align-items: flex-end !important;
		}
		
		.align-items-md-center {
			align-items: center !important;
		}
		
		.align-items-md-baseline {
			align-items: baseline !important;
		}
		
		.align-items-md-stretch {
			align-items: stretch !important;
		}
		
		.align-content-md-start {
			align-content: flex-start !important;
		}
		
		.align-content-md-end {
			align-content: flex-end !important;
		}
		
		.align-content-md-center {
			align-content: center !important;
		}
		
		.align-content-md-between {
			align-content: space-between !important;
		}
		
		.align-content-md-around {
			align-content: space-around !important;
		}
		
		.align-content-md-stretch {
			align-content: stretch !important;
		}
		
		.align-self-md-auto {
			align-self: auto !important;
		}
		
		.align-self-md-start {
			align-self: flex-start !important;
		}
		
		.align-self-md-end {
			align-self: flex-end !important;
		}
		
		.align-self-md-center {
			align-self: center !important;
		}
		
		.align-self-md-baseline {
			align-self: baseline !important;
		}
		
		.align-self-md-stretch {
			align-self: stretch !important;
		}
	}
	
	@media (min-width: 768px) {
		.justify-content-lg-start {
			justify-content: flex-start !important;
		}
		
		.justify-content-lg-end {
			justify-content: flex-end !important;
		}
		
		.justify-content-lg-center {
			justify-content: center !important;
		}
		
		.justify-content-lg-between {
			justify-content: space-between !important;
		}
		
		.justify-content-lg-around {
			justify-content: space-around !important;
		}
		
		.justify-content-lg-evenly {
			justify-content: space-evenly !important;
		}
		
		.align-items-lg-start {
			align-items: flex-start !important;
		}
		
		.align-items-lg-end {
			align-items: flex-end !important;
		}
		
		.align-items-lg-center {
			align-items: center !important;
		}
		
		.align-items-lg-baseline {
			align-items: baseline !important;
		}
		
		.align-items-lg-stretch {
			align-items: stretch !important;
		}
		
		.align-content-lg-start {
			align-content: flex-start !important;
		}
		
		.align-content-lg-end {
			align-content: flex-end !important;
		}
		
		.align-content-lg-center {
			align-content: center !important;
		}
		
		.align-content-lg-between {
			align-content: space-between !important;
		}
		
		.align-content-lg-around {
			align-content: space-around !important;
		}
		
		.align-content-lg-stretch {
			align-content: stretch !important;
		}
		
		.align-self-lg-auto {
			align-self: auto !important;
		}
		
		.align-self-lg-start {
			align-self: flex-start !important;
		}
		
		.align-self-lg-end {
			align-self: flex-end !important;
		}
		
		.align-self-lg-center {
			align-self: center !important;
		}
		
		.align-self-lg-baseline {
			align-self: baseline !important;
		}
		
		.align-self-lg-stretch {
			align-self: stretch !important;
		}
	}

/* Text utilities */
.text-start, .text-left {
	text-align: start;
}

.text-end, .text-right {
	text-align: end;
}

.text-center {
	text-align: center;
}

.text-justify {
	text-align: justify;
}

	/* Different screen sizes */
	@media (min-width: 576px) {
		.text-sm-start, .text-sm-left {
			text-align: start;
		}
		
		.text-sm-end, .text-sm-right {
			text-align: end;
		}
		
		.text-sm-center {
			text-align: center;
		}
		
		.text-sm-justify {
			text-align: justify;
		}
	}
	
	@media (min-width: 768px) {
		.text-md-start, .text-md-left {
			text-align: start;
		}
		
		.text-md-end, .text-md-right {
			text-align: end;
		}
		
		.text-md-center {
			text-align: center;
		}
		
		.text-md-justify {
			text-align: justify;
		}
	}
	
	@media (min-width: 576px) {
		.text-lg-start, .text-lg-left {
			text-align: start;
		}
		
		.text-lg-end, .text-lg-right {
			text-align: end;
		}
		
		.text-lg-center {
			text-align: center;
		}
		
		.text-lg-justify {
			text-align: justify;
		}
	}

/* Paddings */
.p-0 {
	padding: 0!important;
}

.p-1 {
	padding: .25rem!important;
}

.p-2 {
	padding: .5rem!important;
}

.p-3 {
	padding: 1rem!important;
}

.p-4 {
	padding: 2rem!important;
}

	/* Left paddings only */
	.pl-0 {
		padding-left: 0!important;
	}
	
	.pl-1 {
		padding-left: .25rem!important;
	}
	
	.pl-2 {
		padding-left: .5rem!important;
	}
	
	.pl-3 {
		padding-left: 1rem!important;
	}
	
	.pl-4 {
		padding-left: 2rem!important;
	}
	
	/* Right paddings only */
	.pr-0 {
		padding-right: 0!important;
	}
	
	.pr-1 {
		padding-right: .25rem!important;
	}
	
	.pr-2 {
		padding-right: .5rem!important;
	}
	
	.pr-3 {
		padding-right: 1rem!important;
	}
	
	.pr-4 {
		padding-right: 2rem!important;
	}
	
	/* Top paddings only */
	.pt-0 {
		padding-top: 0!important;
	}
	
	.pt-1 {
		padding-top: .25rem!important;
	}
	
	.pt-2 {
		padding-top: .5rem!important;
	}
	
	.pt-3 {
		padding-top: 1rem!important;
	}
	
	.pt-4 {
		padding-top: 2rem!important;
	}
	
	/* Bottom paddings only */
	.pb-0 {
		padding-bottom: 0!important;
	}
	
	.pb-1 {
		padding-bottom: .25rem!important;
	}
	
	.pb-2 {
		padding-bottom: .5rem!important;
	}
	
	.pb-3 {
		padding-bottom: 1rem!important;
	}
	
	.pb-4 {
		padding-bottom: 2rem!important;
	}
	
	/* Different screen sizes */
	@media (min-width: 576px) {
		.p-sm-0 {
			padding: 0!important;
		}
		
		.p-sm-1 {
			padding: .25rem!important;
		}
		
		.p-sm-2 {
			padding: .5rem!important;
		}
		
		.p-lg-3 {
			padding: 1rem!important;
		}
		
		.p-lg-4 {
			padding: 2rem!important
		}
		
			/* Left paddings only */
			.pl-sm-0 {
				padding-left: 0!important;
			}
			
			.pl-sm-1 {
				padding-left: .25rem!important;
			}
			
			.pl-sm-2 {
				padding-left: .5rem!important;
			}
			
			.pl-sm-3 {
				padding-left: 1rem!important;
			}
			
			.pl-sm-3 {
				padding-left: 2rem!important
			}
			
			/* Right paddings only */
			.pr-sm-0 {
				padding-right: 0!important;
			}
			
			.pr-sm-1 {
				padding-right: .25rem!important;
			}
			
			.pr-sm-2 {
				padding-right: .5rem!important;
			}
			
			.pr-sm-3 {
				padding-right: 1rem!important;
			}
			
			.pr-sm-4 {
				padding-right: 2rem!important
			}
			
			/* Top paddings only */
			.pt-sm-0 {
				padding-top: 0!important;
			}
			
			.pt-sm-1 {
				padding-top: .25rem!important;
			}
			
			.pt-sm-2 {
				padding-top: .5rem!important;
			}
			
			.pt-sm-3 {
				padding-top: 1rem!important;
			}
			
			.pt-sm-4 {
				padding-top: 2rem!important
			}
			
			/* Bottom paddings only */
			.pb-sm-0 {
				padding-bottom: 0!important;
			}
			
			.pb-sm-1 {
				padding-bottom: .25rem!important;
			}
			
			.pb-sm-2 {
				padding-bottom: .5rem!important;
			}
			
			.pb-sm-3 {
				padding-bottom: 1rem!important;
			}
			
			.pb-sm-4 {
				padding-bottom: 2rem!important
			}
	}
	
	@media (min-width: 768px) {
		.p-md-0 {
			padding: 0!important;
		}
		
		.p-md-1 {
			padding: .25rem!important;
		}
		
		.p-md-2 {
			padding: .5rem!important;
		}
		
		.p-lg-3 {
			padding: 1rem!important;
		}
		
		.p-lg-4 {
			padding: 2rem!important
		}
		
			/* Left paddings only */
			.pl-md-0 {
				padding-left: 0!important;
			}
			
			.pl-md-1 {
				padding-left: .25rem!important;
			}
			
			.pl-md-2 {
				padding-left: .5rem!important;
			}
			
			.pl-md-3 {
				padding-left: 1rem!important;
			}
			
			.pl-md-3 {
				padding-left: 2rem!important
			}
			
			/* Right paddings only */
			.pr-md-0 {
				padding-right: 0!important;
			}
			
			.pr-md-1 {
				padding-right: .25rem!important;
			}
			
			.pr-md-2 {
				padding-right: .5rem!important;
			}
			
			.pr-md-3 {
				padding-right: 1rem!important;
			}
			
			.pr-md-4 {
				padding-right: 2rem!important
			}
			
			/* Top paddings only */
			.pt-md-0 {
				padding-top: 0!important;
			}
			
			.pt-md-1 {
				padding-top: .25rem!important;
			}
			
			.pt-p-2 {
				padding-top: .5rem!important;
			}
			
			.pt-md-3 {
				padding-top: 1rem!important;
			}
			
			.pt-md-4 {
				padding-top: 2rem!important
			}
			
			/* Bottom paddings only */
			.pb-md-0 {
				padding-bottom: 0!important;
			}
			
			.pb-md-1 {
				padding-bottom: .25rem!important;
			}
			
			.pb-p-2 {
				padding-bottom: .5rem!important;
			}
			
			.pb-md-3 {
				padding-bottom: 1rem!important;
			}
			
			.pb-md-4 {
				padding-bottom: 2rem!important
			}
	}
	
	@media (min-width: 992px) {
		.p-lg-0 {
			padding: 0!important;
		}
		
		.p-lg-1 {
			padding: .25rem!important;
		}
		
		.p-lg-2 {
			padding: .5rem!important;
		}
		
		.p-lg-3 {
			padding: 1rem!important;
		}
		
		.p-lg-4 {
			padding: 2rem!important
		}
		
			/* Left paddings only */
			.pl-lg-0 {
				padding-left: 0!important;
			}
			
			.pl-lg-1 {
				padding-left: .25rem!important;
			}
			
			.pl-lg-2 {
				padding-left: .5rem!important;
			}
			
			.pl-lg-3 {
				padding-left: 1rem!important;
			}
			
			.pl-lg-3 {
				padding-left: 2rem!important
			}
			
			/* Right paddings only */
			.pr-lg-0 {
				padding-right: 0!important;
			}
			
			.pr-lg-1 {
				padding-right: .25rem!important;
			}
			
			.pr-lg-2 {
				padding-right: .5rem!important;
			}
			
			.pr-lg-3 {
				padding-right: 1rem!important;
			}
			
			.pr-lg-4 {
				padding-right: 2rem!important
			}
			
			/* Top paddings only */
			.pt-lg-0 {
				padding-top: 0!important;
			}
			
			.pt-lg-1 {
				padding-top: .25rem!important;
			}
			
			.pt-lg-2 {
				padding-top: .5rem!important;
			}
			
			.pt-lg-3 {
				padding-top: 1rem!important;
			}
			
			.pt-lg-4 {
				padding-top: 2rem!important
			}
			
			/* Bottom paddings only */
			.pb-lg-0 {
				padding-bottom: 0!important;
			}
			
			.pb-lg-1 {
				padding-bottom: .25rem!important;
			}
			
			.pb-lg-2 {
				padding-bottom: .5rem!important;
			}
			
			.pb-lg-3 {
				padding-bottom: 1rem!important;
			}
			
			.pb-lg-4 {
				padding-bottom: 2rem!important
			}
	}

/* Margins */
.m-0 {
	margin: 0!important;
}

.m-1 {
	margin: .25rem!important;
}

.m-2 {
	margin: .5rem!important;
}

.m-3 {
	margin: 1rem!important;
}

.m-4 {
	margin: 2rem!important;
}

	/* Left paddings only */
	.ml-0 {
		margin-left: 0!important;
	}
	
	.ml-1 {
		margin-left: .25rem!important;
	}
	
	.ml-2 {
		margin-left: .5rem!important;
	}
	
	.ml-3 {
		margin-left: 1rem!important;
	}
	
	.ml-4 {
		margin-left: 2rem!important;
	}
	
	/* Right paddings only */
	.mr-0 {
		margin-right: 0!important;
	}
	
	.mr-1 {
		margin-right: .25rem!important;
	}
	
	.mr-2 {
		margin-right: .5rem!important;
	}
	
	.mr-3 {
		margin-right: 1rem!important;
	}
	
	.mr-4 {
		margin-right: 2rem!important;
	}
	
	/* Top paddings only */
	.mt-0 {
		margin-top: 0!important;
	}
	
	.mt-1 {
		margin-top: .25rem!important;
	}
	
	.mt-2 {
		margin-top: .5rem!important;
	}
	
	.mt-3 {
		margin-top: 1rem!important;
	}
	
	.mt-4 {
		margin-top: 2rem!important;
	}
	
	/* Bottom paddings only */
	.mb-0 {
		margin-bottom: 0!important;
	}
	
	.mb-1 {
		margin-bottom: .25rem!important;
	}
	
	.mb-2 {
		margin-bottom: .5rem!important;
	}
	
	.mb-3 {
		margin-bottom: 1rem!important;
	}
	
	.mb-4 {
		margin-bottom: 2rem!important;
	}
	
	/* Different screen sizes */
	@media (min-width: 576px) {
		.m-sm-0 {
			margin: 0!important;
		}
		
		.m-sm-1 {
			margin: .25rem!important;
		}
		
		.m-sm-2 {
			margin: .5rem!important;
		}
		
		.m-lg-3 {
			margin: 1rem!important;
		}
		
		.m-lg-4 {
			margin: 2rem!important
		}
		
			/* Left paddings only */
			.ml-sm-0 {
				margin-left: 0!important;
			}
			
			.ml-sm-1 {
				margin-left: .25rem!important;
			}
			
			.ml-sm-2 {
				margin-left: .5rem!important;
			}
			
			.ml-sm-3 {
				margin-left: 1rem!important;
			}
			
			.ml-sm-3 {
				margin-left: 2rem!important
			}
			
			/* Right paddings only */
			.mr-sm-0 {
				margin-right: 0!important;
			}
			
			.mr-sm-1 {
				margin-right: .25rem!important;
			}
			
			.mr-sm-2 {
				margin-right: .5rem!important;
			}
			
			.mr-sm-3 {
				margin-right: 1rem!important;
			}
			
			.mr-sm-4 {
				margin-right: 2rem!important
			}
			
			/* Top paddings only */
			.mt-sm-0 {
				margin-top: 0!important;
			}
			
			.mt-sm-1 {
				margin-top: .25rem!important;
			}
			
			.mt-sm-2 {
				margin-top: .5rem!important;
			}
			
			.mt-sm-3 {
				margin-top: 1rem!important;
			}
			
			.mt-sm-4 {
				margin-top: 2rem!important
			}
			
			/* Bottom paddings only */
			.mb-sm-0 {
				margin-bottom: 0!important;
			}
			
			.mb-sm-1 {
				margin-bottom: .25rem!important;
			}
			
			.mb-sm-2 {
				margin-bottom: .5rem!important;
			}
			
			.mb-sm-3 {
				margin-bottom: 1rem!important;
			}
			
			.mb-sm-4 {
				margin-bottom: 2rem!important
			}
	}
	
	@media (min-width: 768px) {
		.m-md-0 {
			margin: 0!important;
		}
		
		.m-md-1 {
			margin: .25rem!important;
		}
		
		.m-md-2 {
			margin: .5rem!important;
		}
		
		.m-lg-3 {
			margin: 1rem!important;
		}
		
		.m-lg-4 {
			margin: 2rem!important
		}
		
			/* Left paddings only */
			.ml-md-0 {
				margin-left: 0!important;
			}
			
			.ml-md-1 {
				margin-left: .25rem!important;
			}
			
			.ml-md-2 {
				margin-left: .5rem!important;
			}
			
			.ml-md-3 {
				margin-left: 1rem!important;
			}
			
			.ml-md-3 {
				margin-left: 2rem!important
			}
			
			/* Right paddings only */
			.mr-md-0 {
				margin-right: 0!important;
			}
			
			.mr-md-1 {
				margin-right: .25rem!important;
			}
			
			.mr-md-2 {
				margin-right: .5rem!important;
			}
			
			.mr-md-3 {
				margin-right: 1rem!important;
			}
			
			.mr-md-4 {
				margin-right: 2rem!important
			}
			
			/* Top paddings only */
			.mt-md-0 {
				margin-top: 0!important;
			}
			
			.mt-md-1 {
				margin-top: .25rem!important;
			}
			
			.mt-p-2 {
				margin-top: .5rem!important;
			}
			
			.mt-md-3 {
				margin-top: 1rem!important;
			}
			
			.mt-md-4 {
				margin-top: 2rem!important
			}
			
			/* Bottom paddings only */
			.mb-md-0 {
				margin-bottom: 0!important;
			}
			
			.mb-md-1 {
				margin-bottom: .25rem!important;
			}
			
			.mb-p-2 {
				margin-bottom: .5rem!important;
			}
			
			.mb-md-3 {
				margin-bottom: 1rem!important;
			}
			
			.mb-md-4 {
				margin-bottom: 2rem!important
			}
	}
	
	@media (min-width: 992px) {
		.m-lg-0 {
			margin: 0!important;
		}
		
		.m-lg-1 {
			margin: .25rem!important;
		}
		
		.m-lg-2 {
			margin: .5rem!important;
		}
		
		.m-lg-3 {
			margin: 1rem!important;
		}
		
		.m-lg-4 {
			margin: 2rem!important
		}
		
			/* Left paddings only */
			.ml-lg-0 {
				margin-left: 0!important;
			}
			
			.ml-lg-1 {
				margin-left: .25rem!important;
			}
			
			.ml-lg-2 {
				margin-left: .5rem!important;
			}
			
			.ml-lg-3 {
				margin-left: 1rem!important;
			}
			
			.ml-lg-3 {
				margin-left: 2rem!important
			}
			
			/* Right paddings only */
			.mr-lg-0 {
				margin-right: 0!important;
			}
			
			.mr-lg-1 {
				margin-right: .25rem!important;
			}
			
			.mr-lg-2 {
				margin-right: .5rem!important;
			}
			
			.mr-lg-3 {
				margin-right: 1rem!important;
			}
			
			.mr-lg-4 {
				margin-right: 2rem!important
			}
			
			/* Top paddings only */
			.mt-lg-0 {
				margin-top: 0!important;
			}
			
			.mt-lg-1 {
				margin-top: .25rem!important;
			}
			
			.mt-lg-2 {
				margin-top: .5rem!important;
			}
			
			.mt-lg-3 {
				margin-top: 1rem!important;
			}
			
			.mt-lg-4 {
				margin-top: 2rem!important
			}
			
			/* Bottom paddings only */
			.mb-lg-0 {
				margin-bottom: 0!important;
			}
			
			.mb-lg-1 {
				margin-bottom: .25rem!important;
			}
			
			.mb-lg-2 {
				margin-bottom: .5rem!important;
			}
			
			.mb-lg-3 {
				margin-bottom: 1rem!important;
			}
			
			.mb-lg-4 {
				margin-bottom: 2rem!important
			}
	}
	
/* Floats */
.f-none {
	float: none!important;
}

.f-left {
	float: left!important;
}

.f-right {
	float: right!important;
}

	/* Different screen sizes */
	@media (min-width: 576px) {
		.f-sm-none {
			float: none!important;
		}
		
		.f-sm-left {
			float: left!important;
		}
		
		.f-sm-right {
			float: right!important;
		}
	}
	
	@media (min-width: 768px) {
		.f-md-none {
			float: none!important;
		}
		
		.f-md-left {
			float: left!important;
		}
		
		.f-md-right {
			float: right!important;
		}
	}
	
	@media (min-width: 992px) {
		.f-lg-none {
			float: none!important;
		}
		
		.f-lg-left {
			float: left!important;
		}
		
		.f-lg-right {
			float: right!important;
		}
	}
	
/* Font size */
.fs-1, .fs-normal {
	font-size: 13pt;
}

.fs-2 {
	font-size: 14pt;
}

.fs-3 {
	font-size: 16pt;
}

.fs-4, .fs-big {
	font-size: 20pt;
}

.fs-5, .fs-double {
	font-size: 200%;
}

/* Panel */
.panel {
	--panel-color: var(--blue);
	border: 5px solid var(--panel-color);
	padding: .5rem;
	border-radius: .75rem;
}

.panel-title {
	font-size: 13pt;
	text-align: center;
	background-color: var(--panel-color);
	padding: .25rem;
	border-radius: 1rem;
	font-weight: bold;
}

/* Infoboxes */
.infobox {
	border: 4px solid #ff8100;
	padding: .25rem;
	border-radius: .75rem;
	display: grid;
	gap: .33rem;
}

@media (min-width: 720px) {
	.infobox {
		float: right;
		margin: .25rem 0 .5rem .5rem;
		max-width: 420px;
		min-width: 300px;
	}
}

@media (min-width: 1000px) {
	.infobox {
		max-width: 450px;
	}
}

.infobox-head, .infobox-cell {
	border-radius: .25rem;
}

.infobox-head {
	font-weight: bold;
	text-align: center;
}

.infobox-cell:nth-child(4n+1) {
	background: rgba(0,0,0,.15);
}

.infobox-head.infobox-split, .infobox-head.infobox-Split {
	grid-column: 1;
}

.infobox-cell.infobox-split, .infobox-cell.infobox-Split {
	grid-column: span 3;
}

.infobox-wide, .infobox-img, .infobox-Wide, .infobox-Img {
	grid-column: span 4;
}

.infobox-img, .infobox-Img  {
	text-align: center;
	color: #000!important;
}

.infobox-head.infobox-img, .infobox-head.infobox-Img {
	background: none!important;
}

.infobox-cell.infobox-img, .infobox-cell.infobox-Img {
	font-style: italic;
}

/* Navboxes */
.navbox {
	border: 3px solid var(--red);
}

.navbox {
	border-radius: 1rem;
}

.navbox.mw-collapsed {
	border-radius: 100px!important;
}

.navbox span.mw-collapsible-toggle {
    position: relative;
    top: .25rem;
    right: .75rem;
    font-weight: bold;
}

.navbox table tr td ul {
    margin: 0!important;
}

.navbox table tr td ul li {
    display: inline-block;
}

.navbox table tr td ul li:not(:last-child)::after {
    content: "•";
    padding: 0 .5rem;
}

@media (max-width: 600px) {
    .navbox table {
        text-align: center;
        width: 100%;
    }
}

/* Tables */
.table-responsive {
	margin-top: .25rem;
}

.table-responsive th {
    padding: .5rem;
}

.table-responsive td {
    width: 100%;
    padding: .5rem;
}

.table-responsive tr:first-of-type th {
    border-radius: .5rem 0 0 0;
}

.table-responsive tr:last-of-type th {
    border-radius: 0 0 0 .5rem;
}

.table-responsive tr:last-of-type td {
    border-radius: 0 0 .5rem 0;
}

.table-responsive tr:nth-child(even) td {
    background-color: rgba(0,0,0,.12);
}

@media (max-width: 600px) {
    .table-responsive {
        text-align: center;
        width: 100%;
    }

    .table-responsive th, .table-responsive td {
        display: block;
    }

    .table-responsive tr:first-of-type th {
        border-radius: .5rem .5rem 0 0;
    }

    .table-responsive tr:last-of-type th {
        border-radius: 0;
    }

    .table-responsive tr:last-of-type td {
        border-radius: 0 0 .5rem .5rem;
    }

    .table-responsive tr:nth-child(even) td {
        background-color: #fff;
    }
}

/* Misc. */
/* Colored usernames for staff members */
/* Administrators */
.mw-userlink[title="User:A"],
.mw-userlink[title="User:Jody"],
.mw-userlink[title="User:PikFan23"],
.mw-userlink[title="User:PinkYoshiFan"],
#whoadmin a { color: #f1c !important; }

/* Bureaucrats */
.mw-userlink[title="User:Cheepy-Cheepy"],
.mw-userlink[title="User:Zoadra"],
#whocrat a { color: #a0d !important; }

/* Interface administrators */
.mw-userlink[title="User:Ampera"],
.mw-userlink[title="User:Lakelimbo"],
.mw-userlink[title="User:Porplemontage"],
#whointer-admin a { color: #0c0 !important; }

/* Change the external link icon to a PDF icon for all PDF files */
.mw-parser-output a[href$=".pdf"].external,
.mw-parser-output a[href*=".pdf?"].external,
.mw-parser-output a[href*=".pdf#"].external,
.mw-parser-output a[href$=".PDF"].external,
.mw-parser-output a[href*=".PDF?"].external,
.mw-parser-output a[href*=".PDF#"].external {
	background: url("//upload.wikimedia.org/wikipedia/commons/4/4d/Icon_pdf_file.png") no-repeat right;
	/* @noflip */
	padding: 8px 18px 8px 0;
}

/* Edit section */
.client-js .mw-content-ltr .mw-editsection-bracket:first-of-type,
.client-js .mw-content-rtl .mw-editsection-bracket:first-of-type,
.client-js .mw-content-rtl .mw-editsection-bracket:not(:first-of-type),
.client-js .mw-content-ltr .mw-editsection-bracket:not(:first-of-type) {
	margin: 0;
	color: inherit;
}

/* External link icon */
#bodyContent .external[href ^="/images/External link icon.png"],
.link-https {
  background: url("/images/External link icon.png") center right no-repeat;
  padding-right: 16px;
}
Retrieved from "https://fanonwiki.org/w/index.php?title=MediaWiki:Common.css&oldid=3312"