MediaWiki:Common.css
From Video Game Morgue File
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)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* CSS placed here will be applied to all skins */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,600;1,400;1,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
@font-face {
font-family: 'Cartridge';
font-style: normal;
font-weight: 200;
font-display: swap;
src: url(https://morguefile.wiki/wiki/resources/assets/fonts/Cartridge-Light.woff2) format('woff2');
}
@font-face {
font-family: 'Cartridge';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://morguefile.wiki/wiki/resources/assets/fonts/Cartridge-SemiboldSoft.woff2) format('woff2');
}
body.page-Main_Page.action-view h1.firstHeading, body.page-Main_Page.action-submit h1.firstHeading { display: none; }
body { font-family: 'IBM Plex Sans', sans-serif; }
pre, code, tt, kbd, samp, .mw-code, .mw-editfont-monospace { font-family: 'IBM Plex Mono', monospace }
.firstHeading { font-family: Cartridge, Montserrat, sans-serif; font-weight: 700; font-size: 240%; }
.mw-desktop-sitename, .mw-mobile-sitename { font-family: Cartridge, Montserrat, sans-serif; font-weight: 200; color: #FFEFD5; letter-spacing: 0.04em; font-feature-settings: "ss02"; }
h2 .mw-headline { font-family: Montserrat, sans-serif; font-weight: 400; }
.toc { margin-top: 2rem; margin-bottom: 2rem; }
.mw-body-content h2 { margin-bottom: 1rem; margin-top: 1rem;}
#user-tools { color: #FFEFD5; }
#user-tools .profile-icon { color: #FFEFD5; }
#searchInput { background-color: #FFEFD5; }
#user-tools button { color: #FFEFD5; }
.mw-hamb { color: #FFEFD5; }
.mw-footer { background-color: #FFEFD5; }
/* fix some infobox things */
.portable-infobox {
white-space: normal;
}
.portable-infobox a.new {
color: #ba0000;
}
.portable-infobox a:not(.new):visited {
color: #007bff;
}
.portable-infobox a:not(.new) {
color: #007bff;
}
/* card footers contain links, restyle these a little */
.card-footer:hover {
background-color: rgba(0,0,0,.06);
}
.card a:hover, .card a:focus {
text-decoration: none !important;
}
/* timeline classes follow */
.timeline {
border-left: 3px solid #301F54;
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
position: relative;
/* background: rgba(114, 124, 245, 0.09); */
margin: 0 auto !important;
letter-spacing: 0.2px;
line-height: 1.4em;
font-size: 1.03em;
padding: 50px !important;
list-style: none;
text-align: left;
max-width: 60%;
}
@media (max-width: 767px) {
.timeline {
max-width: 98%;
padding: 25px;
}
}
.timeline h1 {
font-weight: 300;
font-size: 1.4em;
}
.timeline h2,
.timeline h3 {
font-weight: 600;
font-size: 1rem;
margin-bottom: 10px;
padding-top: 0px;
padding-bottom: 0px;
}
.timeline .event {
border-bottom: 1px dashed #e8ebf1;
padding-bottom: 25px;
margin-bottom: 25px;
position: relative;
}
@media (max-width: 767px) {
.timeline .event {
padding-top: 30px;
}
}
.timeline .event:last-of-type {
padding-bottom: 0;
margin-bottom: 0;
border: none;
}
.timeline .event:before,
.timeline .event:after {
position: absolute;
display: block;
top: 0;
}
.timeline .event:before {
left: -207px;
content: attr(data-date);
text-align: right;
font-weight: 100;
font-size: 0.9em;
min-width: 120px;
}
@media (max-width: 767px) {
.timeline .event:before {
left: 0px;
text-align: left;
}
}
.timeline .event:after {
-webkit-box-shadow: 0 0 0 3px #301F54;
box-shadow: 0 0 0 3px #301F54;
left: -55.8px;
background: #fff;
border-radius: 50%;
height: 9px;
width: 9px;
content: "";
top: 5px;
}
/*
@media (max-width: 767px) {
.timeline .event:after {
left: -31.8px;
}
}
*/
.rtl .timeline {
border-left: 0;
text-align: right;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
border-right: 3px solid #301F54;
}
.rtl .timeline .event::before {
left: 0;
right: -170px;
}
.rtl .timeline .event::after {
left: 0;
right: -55.8px;
}