MediaWiki:Common.css: Difference between revisions
MediaWiki interface page
More actions
fandomwiki>Wynthyst No edit summary |
Koza1brada (talk | contribs) Add Oxanium |
||
| (26 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
/* Forgotten futurist */ | |||
/* | |||
* @license | |||
* MyFonts Webfont Build ID 914017 | |||
* | |||
* The fonts listed in this notice are subject to the End User License | |||
* Agreement(s) entered into by the website owner. All other parties are | |||
* explicitly restricted from using the Licensed Webfonts(s). | |||
* | |||
* You may obtain a valid license from one of MyFonts official sites. | |||
* http://www.fonts.com | |||
* http://www.myfonts.com | |||
* http://www.linotype.com | |||
* | |||
*/ | |||
@import url("https://oxeyewiki.o7.si/w/resources/ForgottenFuturist/ForgottenFuturist.css"); | |||
/* Oxanium */ | |||
@font-face { | |||
font-family: Oxanium; | |||
src: url("https://oxeyewiki.o7.si/w/resources/Oxanium/static/Oxanium-ExtraLight.ttf"); | |||
font-weight: extra-light; | |||
} | |||
@font-face { | |||
font-family: Oxanium; | |||
src: url("https://oxeyewiki.o7.si/w/resources/Oxanium/static/Oxanium-ExtraLight.ttf"); | |||
font-weight: extra-light; | |||
} | |||
@font-face { | |||
font-family: Oxanium; | |||
src: url("https://oxeyewiki.o7.si/w/resources/Oxanium/static/Oxanium-Light.ttf"); | |||
font-weight: light; | |||
} | |||
@font-face { | |||
font-family: Oxanium; | |||
src: url("https://oxeyewiki.o7.si/w/resources/Oxanium/static/Oxanium-Medium.ttf"); | |||
font-weight: medium; | |||
} | |||
@font-face { | |||
font-family: Oxanium; | |||
src: url("https://oxeyewiki.o7.si/w/resources/Oxanium/static/Oxanium-Regular.ttf"); | |||
font-weight: regular; | |||
} | |||
@font-face { | |||
font-family: Oxanium; | |||
src: url("https://oxeyewiki.o7.si/w/resources/Oxanium/static/Oxanium-SemiBold.ttf"); | |||
font-weight: semi-bold; | |||
} | |||
@font-face { | |||
font-family: Oxanium; | |||
src: url("https://oxeyewiki.o7.si/w/resources/Oxanium/static/Oxanium-Bold.ttf"); | |||
font-weight: bold; | |||
} | |||
@font-face { | |||
font-family: Oxanium; | |||
src: url("https://oxeyewiki.o7.si/w/resources/Oxanium/static/Oxanium-ExtraBold.ttf"); | |||
font-weight: extra-bold; | |||
} | |||
/* Use forgotten futurist for page titles - in main text it looks kinda weird */ | |||
.mw-page-title-namespace { | |||
font-family: Oxanium; | |||
} | |||
.mw-page-title-seperator { | |||
font-family: Oxanium; | |||
} | |||
.mw-page-title-main { | |||
font-family: Oxanium; | |||
} | |||
/* This is from Fandom */ | |||
/* This governs the sections on the Community portal */ | |||
.cpbox { | |||
display: flex; | |||
flex-direction: row-reverse; | |||
flex-wrap: wrap; | |||
} | |||
.cpbox #admins { | |||
box-sizing: border-box; | |||
width: calc(33% - 10px); | |||
margin: 5px; | |||
flex-grow: 1; | |||
min-width: 300px; | |||
} | |||
.cpbox #help { | |||
box-sizing: border-box; | |||
width: calc(67% - 10px); | |||
margin: 5px; | |||
flex-grow: 1; | |||
} | |||
/* Infobox template style */ | /* Infobox template style */ | ||
| Line 32: | Line 126: | ||
.infobox.bordered .borderless th { | .infobox.bordered .borderless th { | ||
border: 0; | border: 0; | ||
} | |||
/* Front page structure */ | |||
.fpbox { | |||
margin: 5px; | |||
padding: 5px; | |||
overflow: auto; | |||
width: calc(100% - 2px); | |||
} | |||
.fpbox.plain { | |||
background: transparent; | |||
border: none; | |||
box-shadow: none; | |||
} | |||
.fpbox .heading, | |||
.fpbox .mainheading, | |||
.fpbox .welcome { | |||
margin: 0 0 10px; | |||
padding: 0 0 5px; | |||
overflow: auto; | |||
} | |||
.fpbox .mainheading, | |||
.fpbox .welcome { | |||
font-size: 150%; | |||
font-weight: bold; | |||
} | |||
.fpbox .heading { | |||
text-align: center; | |||
font-size: 132%; | |||
} | |||
.linkslabel { | |||
margin: 15px 5px 5px; | |||
padding: 0 0 5px; | |||
} | |||
/* Template:FP links styles */ | |||
.fplinks { | |||
display: flex; | |||
flex-wrap: wrap; | |||
justify-content: space-evenly; | |||
align-items: stretch; | |||
text-align: center; | |||
} | |||
.fplink-outer { | |||
padding: 5px; | |||
flex-basis: calc(25% - 10px); | |||
width: calc(25% - 15px); | |||
min-width: 115px; | |||
display: inline-block; | |||
vertical-align: middle; | |||
} | |||
.fplink-wide { | |||
flex-basis: calc(33% - 10px); | |||
width: calc(33% - 15px); | |||
} | |||
.fplink-fullwidth { | |||
flex-basis: 100%; | |||
width: calc(100% - 15px); | |||
font-weight: bold; | |||
} | |||
.fplink { | |||
padding: 0.5em; | |||
box-sizing: border-box; | |||
width: 100%; | |||
height: 100%; | |||
display: table; | |||
} | |||
.fplink-plain { | |||
background: transparent; | |||
border-radius: 0; | |||
border: 0; | |||
box-shadow: none; | |||
} | |||
.fplink-inner { | |||
display: table-row; | |||
} | |||
.fplink a { | |||
display: table-cell; | |||
vertical-align: middle; | |||
} | |||
.fplink img { | |||
max-width: 150px; | |||
width: 100%; | |||
height: auto; | |||
} | |||
/* Auto-resize front page video to fit smaller columns */ | |||
.fpbox .embedvideowrap { | |||
width: 100%!important; | |||
max-width: 480px; | |||
margin: 0 auto; | |||
} | |||
.fpbox .embedvideowrap iframe { | |||
width: 100%!important; | |||
} | |||
/* Multi-column box support */ | |||
.fp-container main .columns .leftcol, | |||
.fp-container .columns .rightcol { | |||
width: 100%; | |||
margin: 0; | |||
padding: 0; | |||
} | |||
@media (min-width: 990px) { | |||
.fp-container .columns .leftcol { | |||
float: left; | |||
width: 50%; | |||
} | |||
.fp-container .columns .rightcol { | |||
float: right; | |||
width: 50%; | |||
} | |||
} | |||
/* This CSS governs the responsive 3 column main page layout */ | |||
#fptweets { | |||
min-height:calc(325px + 2.3em); | |||
} | |||
#fp-3column.fp-container { | |||
display: grid; | |||
grid-template-areas: "a" "b" "c" "d"; | |||
grid-template-columns: 100%; | |||
} | |||
@media screen and (min-width:990px) { | |||
#fp-3column.fp-container { | |||
grid-template-areas: "a b" "c b" "c d"; | |||
grid-template-columns: 50% 50%; | |||
} | |||
} | |||
@media screen and (min-width:1350px) { | |||
#fp-3column.fp-container { | |||
grid-template-areas: "a b c" "d b c"; | |||
grid-template-columns: 33.3% 33.3% 33.3%; | |||
} | |||
} | |||
.fp-section { | |||
display: flex; | |||
flex-wrap: wrap; | |||
} | |||
#fp-1 { | |||
grid-area: a; | |||
} | |||
#fp-2 { | |||
grid-area: b; | |||
} | |||
#fp-3 { | |||
grid-area: c; | |||
} | |||
#fp-4 { | |||
grid-area: d; | |||
} | } | ||