MediaWiki:Common.css: Difference between revisions
From Fanon Wiki
mNo edit summary |
mNo edit summary |
||
Line 2,128: | Line 2,128: | ||
/* Administrators */ | /* Administrators */ | ||
.mw-userlink[title="User:A"], | .mw-userlink[title="User:A"], | ||
.mw-userlink[title="User:Jody"], | |||
.mw-userlink[title="User:PikFan23"], | .mw-userlink[title="User:PikFan23"], | ||
.mw-userlink[title="User:PinkYoshiFan"], | .mw-userlink[title="User:PinkYoshiFan"], | ||
Line 2,134: | Line 2,135: | ||
/* Bureaucrats */ | /* Bureaucrats */ | ||
.mw-userlink[title="User:Cheepy-Cheepy"], | .mw-userlink[title="User:Cheepy-Cheepy"], | ||
.mw-userlink[title="User:Zoadra"], | |||
#whocrat a { color: #a0d !important; } | #whocrat a { color: #a0d !important; } | ||
Line 2,140: | Line 2,142: | ||
.mw-userlink[title="User:Lakelimbo"], | .mw-userlink[title="User:Lakelimbo"], | ||
.mw-userlink[title="User:Porplemontage"], | .mw-userlink[title="User:Porplemontage"], | ||
#whointer-admin a { color: #0c0 !important; } | #whointer-admin a { color: #0c0 !important; } | ||
Latest revision as of 23:34, 29 April 2024
/* 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;
}