MediaWiki:Common.css: Difference between revisions
From Fanon Wiki
No edit summary |
m (Paddings and margins fixed. Added font-size shortcuts) |
||
Line 1,025: | Line 1,025: | ||
.p-3 { | .p-3 { | ||
padding: 1rem!important; | padding: 1rem!important; | ||
} | |||
.p-4 { | |||
padding: 2rem!important; | |||
} | } | ||
/* Left paddings only */ | /* Left paddings only */ | ||
.pl-0 { | .pl-0 { | ||
padding: 0!important; | padding-left: 0!important; | ||
} | } | ||
.pl-1 { | .pl-1 { | ||
padding: .25rem!important; | padding-left: .25rem!important; | ||
} | } | ||
.pl-2 { | .pl-2 { | ||
padding: .5rem!important; | padding-left: .5rem!important; | ||
} | } | ||
.pl-3 { | .pl-3 { | ||
padding: 1rem!important; | padding-left: 1rem!important; | ||
} | |||
.pl-4 { | |||
padding-left: 2rem!important; | |||
} | } | ||
/* Right paddings only */ | /* Right paddings only */ | ||
.pr-0 { | .pr-0 { | ||
padding: 0!important; | padding-right: 0!important; | ||
} | } | ||
.pr-1 { | .pr-1 { | ||
padding: .25rem!important; | padding-right: .25rem!important; | ||
} | } | ||
.pr-2 { | .pr-2 { | ||
padding: .5rem!important; | padding-right: .5rem!important; | ||
} | } | ||
.pr-3 { | .pr-3 { | ||
padding: 1rem!important; | padding-right: 1rem!important; | ||
} | |||
.pr-4 { | |||
padding-right: 2rem!important; | |||
} | } | ||
/* Top paddings only */ | /* Top paddings only */ | ||
.pt-0 { | .pt-0 { | ||
padding: 0!important; | padding-top: 0!important; | ||
} | } | ||
.pt-1 { | .pt-1 { | ||
padding: .25rem!important; | padding-top: .25rem!important; | ||
} | } | ||
.pt-2 { | .pt-2 { | ||
padding: .5rem!important; | padding-top: .5rem!important; | ||
} | } | ||
.pt-3 { | .pt-3 { | ||
padding: 1rem!important; | padding-top: 1rem!important; | ||
} | |||
.pt-4 { | |||
padding-top: 2rem!important; | |||
} | } | ||
/* Bottom paddings only */ | /* Bottom paddings only */ | ||
.pb-0 { | .pb-0 { | ||
padding: 0!important; | padding-bottom: 0!important; | ||
} | } | ||
.pb-1 { | .pb-1 { | ||
padding: .25rem!important; | padding-bottom: .25rem!important; | ||
} | } | ||
.pb-2 { | .pb-2 { | ||
padding: .5rem!important; | padding-bottom: .5rem!important; | ||
} | } | ||
.pb-3 { | .pb-3 { | ||
padding: 1rem!important; | padding-bottom: 1rem!important; | ||
} | |||
.pb-4 { | |||
padding-bottom: 2rem!important; | |||
} | } | ||
Line 1,109: | Line 1,129: | ||
} | } | ||
.p- | .p-lg-3 { | ||
padding: 1rem!important; | padding: 1rem!important; | ||
} | |||
.p-lg-4 { | |||
padding: 2rem!important | |||
} | } | ||
/* Left paddings only */ | /* Left paddings only */ | ||
.pl-sm-0 { | .pl-sm-0 { | ||
padding: 0!important; | padding-left: 0!important; | ||
} | } | ||
.pl-sm-1 { | .pl-sm-1 { | ||
padding: .25rem!important; | padding-left: .25rem!important; | ||
} | } | ||
.pl-sm-2 { | .pl-sm-2 { | ||
padding: .5rem!important; | padding-left: .5rem!important; | ||
} | } | ||
.pl-sm-3 { | .pl-sm-3 { | ||
padding: 1rem!important; | padding-left: 1rem!important; | ||
} | |||
.pl-sm-3 { | |||
padding-left: 2rem!important | |||
} | } | ||
/* Right paddings only */ | /* Right paddings only */ | ||
.pr-sm-0 { | .pr-sm-0 { | ||
padding: 0!important; | padding-right: 0!important; | ||
} | } | ||
.pr-sm-1 { | .pr-sm-1 { | ||
padding: .25rem!important; | padding-right: .25rem!important; | ||
} | } | ||
.pr-sm-2 { | .pr-sm-2 { | ||
padding: .5rem!important; | padding-right: .5rem!important; | ||
} | } | ||
.pr-sm-3 { | .pr-sm-3 { | ||
padding: 1rem!important; | padding-right: 1rem!important; | ||
} | |||
.pr-sm-4 { | |||
padding-right: 2rem!important | |||
} | } | ||
/* Top paddings only */ | /* Top paddings only */ | ||
.pt-sm-0 { | .pt-sm-0 { | ||
padding: 0!important; | padding-top: 0!important; | ||
} | } | ||
.pt-sm-1 { | .pt-sm-1 { | ||
padding: .25rem!important; | padding-top: .25rem!important; | ||
} | } | ||
.pt-sm-2 { | .pt-sm-2 { | ||
padding: .5rem!important; | padding-top: .5rem!important; | ||
} | } | ||
.pt-sm-3 { | .pt-sm-3 { | ||
padding: 1rem!important; | padding-top: 1rem!important; | ||
} | |||
.pt-sm-4 { | |||
padding-top: 2rem!important | |||
} | } | ||
/* Bottom paddings only */ | /* Bottom paddings only */ | ||
.pb-sm-0 { | .pb-sm-0 { | ||
padding: 0!important; | padding-bottom: 0!important; | ||
} | } | ||
.pb-sm-1 { | .pb-sm-1 { | ||
padding: .25rem!important; | padding-bottom: .25rem!important; | ||
} | } | ||
.pb-sm-2 { | .pb-sm-2 { | ||
padding: .5rem!important; | padding-bottom: .5rem!important; | ||
} | } | ||
.pb-sm-3 { | .pb-sm-3 { | ||
padding: 1rem!important; | padding-bottom: 1rem!important; | ||
} | |||
.pb-sm-4 { | |||
padding-bottom: 2rem!important | |||
} | } | ||
} | } | ||
Line 1,195: | Line 1,235: | ||
} | } | ||
.p- | .p-lg-3 { | ||
padding: 1rem!important; | padding: 1rem!important; | ||
} | |||
.p-lg-4 { | |||
padding: 2rem!important | |||
} | } | ||
/* Left paddings only */ | /* Left paddings only */ | ||
.pl-md-0 { | .pl-md-0 { | ||
padding: 0!important; | padding-left: 0!important; | ||
} | } | ||
.pl-md-1 { | .pl-md-1 { | ||
padding: .25rem!important; | padding-left: .25rem!important; | ||
} | } | ||
.pl-md-2 { | .pl-md-2 { | ||
padding: .5rem!important; | padding-left: .5rem!important; | ||
} | |||
.pl-md-3 { | |||
padding-left: 1rem!important; | |||
} | } | ||
.pl-md-3 { | .pl-md-3 { | ||
padding: | padding-left: 2rem!important | ||
} | } | ||
/* Right paddings only */ | /* Right paddings only */ | ||
.pr-md-0 { | .pr-md-0 { | ||
padding: 0!important; | padding-right: 0!important; | ||
} | } | ||
.pr-md-1 { | .pr-md-1 { | ||
padding: .25rem!important; | padding-right: .25rem!important; | ||
} | } | ||
.pr-md-2 { | .pr-md-2 { | ||
padding: .5rem!important; | padding-right: .5rem!important; | ||
} | } | ||
.pr-md-3 { | .pr-md-3 { | ||
padding: 1rem!important; | padding-right: 1rem!important; | ||
} | |||
.pr-md-4 { | |||
padding-right: 2rem!important | |||
} | } | ||
/* Top paddings only */ | /* Top paddings only */ | ||
.pt-md-0 { | .pt-md-0 { | ||
padding: 0!important; | padding-top: 0!important; | ||
} | } | ||
.pt-md-1 { | .pt-md-1 { | ||
padding: .25rem!important; | padding-top: .25rem!important; | ||
} | } | ||
.pt- | .pt-p-2 { | ||
padding: .5rem!important; | padding-top: .5rem!important; | ||
} | } | ||
.pt-md-3 { | .pt-md-3 { | ||
padding: 1rem!important; | padding-top: 1rem!important; | ||
} | |||
.pt-md-4 { | |||
padding-top: 2rem!important | |||
} | } | ||
/* Bottom paddings only */ | /* Bottom paddings only */ | ||
.pb-md-0 { | .pb-md-0 { | ||
padding: 0!important; | padding-bottom: 0!important; | ||
} | } | ||
.pb-md-1 { | .pb-md-1 { | ||
padding: .25rem!important; | padding-bottom: .25rem!important; | ||
} | } | ||
.pb- | .pb-p-2 { | ||
padding: .5rem!important; | padding-bottom: .5rem!important; | ||
} | } | ||
.pb-md-3 { | .pb-md-3 { | ||
padding: 1rem!important; | padding-bottom: 1rem!important; | ||
} | |||
.pb-md-4 { | |||
padding-bottom: 2rem!important | |||
} | } | ||
} | } | ||
Line 1,283: | Line 1,343: | ||
.p-lg-3 { | .p-lg-3 { | ||
padding: 1rem!important; | padding: 1rem!important; | ||
} | |||
.p-lg-4 { | |||
padding: 2rem!important | |||
} | } | ||
/* Left paddings only */ | /* Left paddings only */ | ||
.pl-lg-0 { | .pl-lg-0 { | ||
padding: 0!important; | padding-left: 0!important; | ||
} | } | ||
.pl-lg-1 { | .pl-lg-1 { | ||
padding: .25rem!important; | padding-left: .25rem!important; | ||
} | } | ||
.pl-lg-2 { | .pl-lg-2 { | ||
padding: .5rem!important; | padding-left: .5rem!important; | ||
} | } | ||
.pl-lg-3 { | .pl-lg-3 { | ||
padding: 1rem!important; | padding-left: 1rem!important; | ||
} | |||
.pl-lg-3 { | |||
padding-left: 2rem!important | |||
} | } | ||
/* Right paddings only */ | /* Right paddings only */ | ||
.pr-lg-0 { | .pr-lg-0 { | ||
padding: 0!important; | padding-right: 0!important; | ||
} | } | ||
.pr-lg-1 { | .pr-lg-1 { | ||
padding: .25rem!important; | padding-right: .25rem!important; | ||
} | } | ||
.pr-lg-2 { | .pr-lg-2 { | ||
padding: .5rem!important; | padding-right: .5rem!important; | ||
} | } | ||
.pr-lg-3 { | .pr-lg-3 { | ||
padding: 1rem!important; | padding-right: 1rem!important; | ||
} | |||
.pr-lg-4 { | |||
padding-right: 2rem!important | |||
} | } | ||
/* Top paddings only */ | /* Top paddings only */ | ||
.pt-lg-0 { | .pt-lg-0 { | ||
padding: 0!important; | padding-top: 0!important; | ||
} | } | ||
.pt-lg-1 { | .pt-lg-1 { | ||
padding: .25rem!important; | padding-top: .25rem!important; | ||
} | } | ||
.pt-lg-2 { | .pt-lg-2 { | ||
padding: .5rem!important; | padding-top: .5rem!important; | ||
} | } | ||
.pt-lg-3 { | .pt-lg-3 { | ||
padding: 1rem!important; | padding-top: 1rem!important; | ||
} | |||
.pt-lg-4 { | |||
padding-top: 2rem!important | |||
} | } | ||
/* Bottom paddings only */ | /* Bottom paddings only */ | ||
.pb-lg-0 { | .pb-lg-0 { | ||
padding: 0!important; | padding-bottom: 0!important; | ||
} | } | ||
.pb-lg-1 { | .pb-lg-1 { | ||
padding: .25rem!important; | padding-bottom: .25rem!important; | ||
} | } | ||
.pb-lg-2 { | .pb-lg-2 { | ||
padding: .5rem!important; | padding-bottom: .5rem!important; | ||
} | } | ||
.pb-lg-3 { | .pb-lg-3 { | ||
padding: 1rem!important; | padding-bottom: 1rem!important; | ||
} | |||
.pb-lg-4 { | |||
padding-bottom: 2rem!important | |||
} | } | ||
} | } | ||
Line 1,369: | Line 1,449: | ||
.m-3 { | .m-3 { | ||
margin: 1rem!important; | margin: 1rem!important; | ||
} | |||
.m-4 { | |||
margin: 2rem!important; | |||
} | } | ||
/* Left paddings only */ | /* Left paddings only */ | ||
.ml-0 { | .ml-0 { | ||
margin: 0!important; | margin-left: 0!important; | ||
} | } | ||
.ml-1 { | .ml-1 { | ||
margin: .25rem!important; | margin-left: .25rem!important; | ||
} | } | ||
.ml-2 { | .ml-2 { | ||
margin: .5rem!important; | margin-left: .5rem!important; | ||
} | } | ||
.ml-3 { | .ml-3 { | ||
margin: 1rem!important; | margin-left: 1rem!important; | ||
} | |||
.ml-4 { | |||
margin-left: 2rem!important; | |||
} | } | ||
/* Right paddings only */ | /* Right paddings only */ | ||
.mr-0 { | .mr-0 { | ||
margin: 0!important; | margin-right: 0!important; | ||
} | } | ||
.mr-1 { | .mr-1 { | ||
margin: .25rem!important; | margin-right: .25rem!important; | ||
} | } | ||
.mr-2 { | .mr-2 { | ||
margin: .5rem!important; | margin-right: .5rem!important; | ||
} | } | ||
.mr-3 { | .mr-3 { | ||
margin: 1rem!important; | margin-right: 1rem!important; | ||
} | |||
.mr-4 { | |||
margin-right: 2rem!important; | |||
} | } | ||
/* Top paddings only */ | /* Top paddings only */ | ||
.mt-0 { | .mt-0 { | ||
margin: 0!important; | margin-top: 0!important; | ||
} | } | ||
.mt-1 { | .mt-1 { | ||
margin: .25rem!important; | margin-top: .25rem!important; | ||
} | } | ||
.mt-2 { | .mt-2 { | ||
margin: .5rem!important; | margin-top: .5rem!important; | ||
} | } | ||
.mt-3 { | .mt-3 { | ||
margin: 1rem!important; | margin-top: 1rem!important; | ||
} | |||
.mt-4 { | |||
margin-top: 2rem!important; | |||
} | } | ||
/* Bottom paddings only */ | /* Bottom paddings only */ | ||
.mb-0 { | .mb-0 { | ||
margin: 0!important; | margin-bottom: 0!important; | ||
} | } | ||
.mb-1 { | .mb-1 { | ||
margin: .25rem!important; | margin-bottom: .25rem!important; | ||
} | } | ||
.mb-2 { | .mb-2 { | ||
margin: .5rem!important; | margin-bottom: .5rem!important; | ||
} | } | ||
.mb-3 { | .mb-3 { | ||
margin: 1rem!important; | margin-bottom: 1rem!important; | ||
} | |||
.mb-4 { | |||
margin-bottom: 2rem!important; | |||
} | } | ||
Line 1,453: | Line 1,553: | ||
} | } | ||
.m- | .m-lg-3 { | ||
margin: 1rem!important; | margin: 1rem!important; | ||
} | |||
.m-lg-4 { | |||
margin: 2rem!important | |||
} | } | ||
/* Left paddings only */ | /* Left paddings only */ | ||
.ml-sm-0 { | .ml-sm-0 { | ||
margin: 0!important; | margin-left: 0!important; | ||
} | } | ||
.ml-sm-1 { | .ml-sm-1 { | ||
margin: .25rem!important; | margin-left: .25rem!important; | ||
} | } | ||
.ml-sm-2 { | .ml-sm-2 { | ||
margin: .5rem!important; | margin-left: .5rem!important; | ||
} | |||
.ml-sm-3 { | |||
margin-left: 1rem!important; | |||
} | } | ||
.ml-sm-3 { | .ml-sm-3 { | ||
margin: | margin-left: 2rem!important | ||
} | } | ||
/* Right paddings only */ | /* Right paddings only */ | ||
.mr-sm-0 { | .mr-sm-0 { | ||
margin: 0!important; | margin-right: 0!important; | ||
} | } | ||
.mr-sm-1 { | .mr-sm-1 { | ||
margin: .25rem!important; | margin-right: .25rem!important; | ||
} | } | ||
.mr-sm-2 { | .mr-sm-2 { | ||
margin: .5rem!important; | margin-right: .5rem!important; | ||
} | } | ||
.mr-sm-3 { | .mr-sm-3 { | ||
margin: 1rem!important; | margin-right: 1rem!important; | ||
} | |||
.mr-sm-4 { | |||
margin-right: 2rem!important | |||
} | } | ||
/* Top paddings only */ | /* Top paddings only */ | ||
.mt-sm-0 { | .mt-sm-0 { | ||
margin: 0!important; | margin-top: 0!important; | ||
} | } | ||
.mt-sm-1 { | .mt-sm-1 { | ||
margin: .25rem!important; | margin-top: .25rem!important; | ||
} | } | ||
.mt-sm-2 { | .mt-sm-2 { | ||
margin: .5rem!important; | margin-top: .5rem!important; | ||
} | } | ||
.mt-sm-3 { | .mt-sm-3 { | ||
margin: 1rem!important; | margin-top: 1rem!important; | ||
} | |||
.mt-sm-4 { | |||
margin-top: 2rem!important | |||
} | } | ||
/* Bottom paddings only */ | /* Bottom paddings only */ | ||
.mb-sm-0 { | .mb-sm-0 { | ||
margin: 0!important; | margin-bottom: 0!important; | ||
} | } | ||
.mb-sm-1 { | .mb-sm-1 { | ||
margin: .25rem!important; | margin-bottom: .25rem!important; | ||
} | } | ||
.mb-sm-2 { | .mb-sm-2 { | ||
margin: .5rem!important; | margin-bottom: .5rem!important; | ||
} | } | ||
.mb-sm-3 { | .mb-sm-3 { | ||
margin: 1rem!important; | margin-bottom: 1rem!important; | ||
} | |||
.mb-sm-4 { | |||
margin-bottom: 2rem!important | |||
} | } | ||
} | } | ||
Line 1,539: | Line 1,659: | ||
} | } | ||
.m- | .m-lg-3 { | ||
margin: 1rem!important; | margin: 1rem!important; | ||
} | |||
.m-lg-4 { | |||
margin: 2rem!important | |||
} | } | ||
/* Left paddings only */ | /* Left paddings only */ | ||
.ml-md-0 { | .ml-md-0 { | ||
margin: 0!important; | margin-left: 0!important; | ||
} | } | ||
.ml-md-1 { | .ml-md-1 { | ||
margin: .25rem!important; | margin-left: .25rem!important; | ||
} | } | ||
.ml-md-2 { | .ml-md-2 { | ||
margin: .5rem!important; | margin-left: .5rem!important; | ||
} | |||
.ml-md-3 { | |||
margin-left: 1rem!important; | |||
} | } | ||
.ml-md-3 { | .ml-md-3 { | ||
margin: | margin-left: 2rem!important | ||
} | } | ||
/* Right paddings only */ | /* Right paddings only */ | ||
.mr-md-0 { | .mr-md-0 { | ||
margin: 0!important; | margin-right: 0!important; | ||
} | } | ||
.mr-md-1 { | .mr-md-1 { | ||
margin: .25rem!important; | margin-right: .25rem!important; | ||
} | } | ||
.mr-md-2 { | .mr-md-2 { | ||
margin: .5rem!important; | margin-right: .5rem!important; | ||
} | } | ||
.mr-md-3 { | .mr-md-3 { | ||
margin: 1rem!important; | margin-right: 1rem!important; | ||
} | |||
.mr-md-4 { | |||
margin-right: 2rem!important | |||
} | } | ||
/* Top paddings only */ | /* Top paddings only */ | ||
.mt-md-0 { | .mt-md-0 { | ||
margin: 0!important; | margin-top: 0!important; | ||
} | } | ||
.mt-md-1 { | .mt-md-1 { | ||
margin: .25rem!important; | margin-top: .25rem!important; | ||
} | } | ||
.mt- | .mt-p-2 { | ||
margin: .5rem!important; | margin-top: .5rem!important; | ||
} | } | ||
.mt-md-3 { | .mt-md-3 { | ||
margin: 1rem!important; | margin-top: 1rem!important; | ||
} | |||
.mt-md-4 { | |||
margin-top: 2rem!important | |||
} | } | ||
/* Bottom paddings only */ | /* Bottom paddings only */ | ||
.mb-md-0 { | .mb-md-0 { | ||
margin: 0!important; | margin-bottom: 0!important; | ||
} | } | ||
.mb-md-1 { | .mb-md-1 { | ||
margin: .25rem!important; | margin-bottom: .25rem!important; | ||
} | } | ||
.mb- | .mb-p-2 { | ||
margin: .5rem!important; | margin-bottom: .5rem!important; | ||
} | } | ||
.mb-md-3 { | .mb-md-3 { | ||
margin: 1rem!important; | margin-bottom: 1rem!important; | ||
} | |||
.mb-md-4 { | |||
margin-bottom: 2rem!important | |||
} | } | ||
} | } | ||
Line 1,627: | Line 1,767: | ||
.m-lg-3 { | .m-lg-3 { | ||
margin: 1rem!important; | margin: 1rem!important; | ||
} | |||
.m-lg-4 { | |||
margin: 2rem!important | |||
} | } | ||
/* Left paddings only */ | /* Left paddings only */ | ||
.ml-lg-0 { | .ml-lg-0 { | ||
margin: 0!important; | margin-left: 0!important; | ||
} | } | ||
.ml-lg-1 { | .ml-lg-1 { | ||
margin: .25rem!important; | margin-left: .25rem!important; | ||
} | } | ||
.ml-lg-2 { | .ml-lg-2 { | ||
margin: .5rem!important; | margin-left: .5rem!important; | ||
} | } | ||
.ml-lg-3 { | .ml-lg-3 { | ||
margin: 1rem!important; | margin-left: 1rem!important; | ||
} | |||
.ml-lg-3 { | |||
margin-left: 2rem!important | |||
} | } | ||
/* Right paddings only */ | /* Right paddings only */ | ||
.mr-lg-0 { | .mr-lg-0 { | ||
margin: 0!important; | margin-right: 0!important; | ||
} | } | ||
.mr-lg-1 { | .mr-lg-1 { | ||
margin: .25rem!important; | margin-right: .25rem!important; | ||
} | } | ||
.mr-lg-2 { | .mr-lg-2 { | ||
margin: .5rem!important; | margin-right: .5rem!important; | ||
} | } | ||
.mr-lg-3 { | .mr-lg-3 { | ||
margin: 1rem!important; | margin-right: 1rem!important; | ||
} | |||
.mr-lg-4 { | |||
margin-right: 2rem!important | |||
} | } | ||
/* Top paddings only */ | /* Top paddings only */ | ||
.mt-lg-0 { | .mt-lg-0 { | ||
margin: 0!important; | margin-top: 0!important; | ||
} | } | ||
.mt-lg-1 { | .mt-lg-1 { | ||
margin: .25rem!important; | margin-top: .25rem!important; | ||
} | } | ||
.mt-lg-2 { | .mt-lg-2 { | ||
margin: .5rem!important; | margin-top: .5rem!important; | ||
} | } | ||
.mt-lg-3 { | .mt-lg-3 { | ||
margin: 1rem!important; | margin-top: 1rem!important; | ||
} | |||
.mt-lg-4 { | |||
margin-top: 2rem!important | |||
} | } | ||
/* Bottom paddings only */ | /* Bottom paddings only */ | ||
.mb-lg-0 { | .mb-lg-0 { | ||
margin: 0!important; | margin-bottom: 0!important; | ||
} | } | ||
.mb-lg-1 { | .mb-lg-1 { | ||
margin: .25rem!important; | margin-bottom: .25rem!important; | ||
} | } | ||
.mb-lg-2 { | .mb-lg-2 { | ||
margin: .5rem!important; | margin-bottom: .5rem!important; | ||
} | } | ||
.mb-lg-3 { | .mb-lg-3 { | ||
margin: 1rem!important; | margin-bottom: 1rem!important; | ||
} | |||
.mb-lg-4 { | |||
margin-bottom: 2rem!important | |||
} | } | ||
} | } | ||
Line 1,753: | Line 1,913: | ||
} | } | ||
} | } | ||
/* 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%; | |||
} |
Revision as of 15:53, 1 May 2022
/* 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);
}
/* 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 */
.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%;
}