MediaWiki:Common.css
Jump to navigation
Jump to search
Note: After saving, 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)
- Internet Explorer: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
/* CSS placed here will be applied to all skins */
/**
Template for Infobox_Monster
**/
.infobox {
background: #eee;
border: 1px solid #aaa;
float: right;
margin: 0.5em 0 1em 1em;
padding: 1em;
width: 300px;
word-break: break-word;
font-size: 0.85em;
}
.infobox-header {
font-size: 1.5em;
text-align: center;
line-height: 1.4em;
padding: 0.5em 0;
line-height: 2em;
background-color: #bebebe;
font-weight: bold;
}
.infobox-title {
font-size: 1.25em;
text-align: center;
line-height: 2em;
background-color: #bebebe;
font-weight: bold;
}
.infobox-image {
text-align: center;
}
.infobox-image img {
max-width: 300px;
height: auto;
padding: 1em;
}
.infobox-stats {
text-align: center;
padding: .25em;
}
.infobox-nested {
text-align: center;
}
.infobox th {
text-align: right;
}
.infobox td {
vertical-align: top;
padding: 0.25em 0.5em;
line-height: 1.6em;
}
.fullWidth-table {
width: 100%;
}
/**
Main Page
**/
.mainpage-header {
display: flex;
margin: 2.6em 1.75em 1.5em;
}
.mainpage-header .header-intro {
flex: 2;
}
.mainpage-header .header-intro h1 {
font-size: 2.5em;
border: none;
margin: 0 0 0.15em;
}
.mainpage-header .header-intro p {
font-size: 1.1em;
line-height: 1.7em;
}
.mainpage-header .header-stats {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
margin-top: -1em;
}
.mainpage-header .header-stats ul {
list-style: none;
}
.mainpage-body {
display: flex;
flex-flow: row wrap;
}
.mainpage-body h2 a {
color: #444e5a;
}
.mainpage-body .tile {
padding-left: 1.75em;
padding-right: 1.75em;
max-width: 100%;
}
.mainpage-body .tile-row {
width: 100%;
margin-bottom: 0.9rem;
}
.mainpage-left {
flex: 2;
display: flex;
flex-flow: column wrap;
margin-right: 0.9rem;
}
.mainpage-left > * {
margin: 0 0 0.9rem;
}
.mainpage-right {
flex: 1;
display: flex;
flex-flow: column wrap;
}
.mainpage-right > * {
margin: 0 0 0.9rem;
}
.mainpage-discord {
border: none;
box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.3);
}
.mainpage-discord .tile-top {
display: flex;
align-items: center;
background: #7289da;
padding: 1em 1.75em;
}
.mainpage-discord .tile-top a {
flex: 1;
position: relative;
text-decoration: none;
}
.mainpage-discord .tile-top a:hover .arrow {
transform: translateX(50%);
}
.mainpage-discord .tile-bottom {
background: #697ec4;
border: none;
padding: 1em 1.75em;
}
.mainpage-discord .tile-bottom p {
color: #ffffff;
font-weight: bold;
font-size: 0.9em;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.03em;
margin: 0;
}
.mainpage-discord .discord-icon {
margin-right: 0.75em;
}
.mainpage-discord .server-name {
color: #ffffff;
font-weight: bold;
font-size: 1.25em;
margin: 0.5em 0 -0.15em;
}
.mainpage-discord .server-tagline {
color: rgba(255, 255, 255, 0.9);
margin-bottom: 0.5em;
}
.mainpage-discord .arrow {
position: absolute;
top: calc(50% - .5em);
right: 0;
height: 1em;
width: 0.7em;
background-size: 0.7em 1em;
transition: 0.3s ease-out;
}