MediaWiki:Common.css: Difference between revisions
MediaWiki interface page
More actions
fandomwiki>Wynthyst Created page with "→CSS placed here will be applied to all skins: →Footer: #ft { background: none; } #ft div { width: 1100px; } #ft h1, #ft a, #ft { color: #FFFFFF; font-size: 10px; } ..." |
Koza1brada (talk | contribs) Add Oxanium |
||
| (37 intermediate revisions by 5 users not shown) | |||
| Line 1: | Line 1: | ||
# | /* Forgotten futurist */ | ||
background: | |||
/* | |||
* @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 { | |||
border: 1px solid #0A78E3; | |||
background-color: black; | |||
color: #A6CFFD; | |||
margin-bottom: 0.5em; | |||
margin-left: 1em; | |||
padding: 0.2em; | |||
float: right; | |||
clear: right; | |||
} | |||
.infobox td, | |||
.infobox th { | |||
vertical-align: top; | |||
} | |||
.infobox caption { | |||
font-size: larger; | |||
margin-left: inherit; | |||
} | |||
.infobox.bordered { | |||
border-collapse: collapse; | |||
} | |||
.infobox.bordered td, | |||
.infobox.bordered th { | |||
border: 1px solid #0A78E3; | |||
} | |||
.infobox.bordered .borderless td, | |||
.infobox.bordered .borderless th { | |||
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; | |||
font- | |||
} | } | ||
.fpbox .heading { | |||
text-align: center; | |||
font-size: 132%; | |||
} | } | ||
.linkslabel { | |||
margin-left: | 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; | |||
} | } | ||