MediaWiki:Common.css
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.
.character-infobox {
float: right;
width: 300px;
margin: 0 0 1em 1em;
border-collapse: separate;
border-spacing: 0;
border: 2px solid var(--infobox-color);
border-radius: 0 0 10px 10px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 3px 8px rgba(0,0,0,0.18);
font-size: 90%;
}
/* Title/Header */
.character-infobox-title {
background: var(--infobox-color);
color: var(--infobox-text);
text-align: center;
font-size: 130%;
font-weight: bold;
padding: 10px;
border-radius: 0;
}
/* Image Area */
.character-infobox-image {
text-align: center;
padding: 12px;
background: #f7f7f7;
}
/* Labels */
.character-infobox th {
width: 35%;
text-align: left;
vertical-align: top;
padding: 7px;
background: #eeeeee;
border-top: 1px solid #d5d5d5;
font-weight: bold;
}
/* Values */
.character-infobox td {
padding: 7px;
border-top: 1px solid #d5d5d5;
background: #ffffff;
}
/* Remove first row borders */
.character-infobox tr:first-of-type th,
.character-infobox tr:first-of-type td {
border-top: none;
}
/* Hover effect */
.character-infobox tr:hover th,
.character-infobox tr:hover td {
background: rgba(0,0,0,0.04);
}
/* Bottom rounded corners */
.character-infobox tr:last-child th {
border-radius: 0 0 0 8px;
}
.character-infobox tr:last-child td {
border-radius: 0 0 8px 0;
}
/* Image rounding */
.character-infobox-image img {
max-width: 100%;
height: auto;
}
/* Links inside infobox */
.character-infobox a {
color: inherit;
}
/* Mobile support */
@media screen and (max-width: 700px) {
.character-infobox {
float: none;
width: 100%;
margin: 1em 0;
}
}
/* ===========================
Wiki Home Template Styling
=========================== */
wiki-home {
--wh-bg: #14161c;
--wh-panel: #1c1f28;
--wh-border: #2e323d;
--wh-accent: #d4af37;
--wh-text: #e8e6e1;
--wh-text-dim: #a8a8ab;
display: flex;
flex-wrap: wrap;
gap: 24px;
background: var(--wh-bg);
color: var(--wh-text);
border: 1px solid var(--wh-border);
border-radius: 10px;
padding: 28px;
margin: 1em 0;
font-family: "Segoe UI", Helvetica, Arial, sans-serif;
}
/* Shared column styling */
.wiki-home-left,
.wiki-home-right {
flex: 1 1 220px;
min-width: 200px;
}
.wiki-home-left h2,
.wiki-home-right h2 {
font-size: 1em;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--wh-accent);
border-bottom: 1px solid var(--wh-border);
padding-bottom: 6px;
margin: 0 0 10px;
}
.wiki-home-left h3,
.wiki-home-right h3 {
font-size: 0.85em;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--wh-text-dim);
margin: 18px 0 8px;
}
.wiki-home-left ul,
.wiki-home-right ul {
list-style: none;
margin: 0;
padding: 0;
}
.wiki-home-left ul ul,
.wiki-home-right ul ul {
margin: 4px 0 4px 12px;
padding-left: 8px;
border-left: 1px solid var(--wh-border);
}
.wiki-home-left li,
.wiki-home-right li {
padding: 4px 0;
font-size: 0.92em;
}
.wiki-home-left a,
.wiki-home-right a {
color: var(--wh-text);
text-decoration: none;
transition: color 0.15s ease;
}
.wiki-home-left a:hover,
.wiki-home-right a:hover {
color: var(--wh-accent);
text-decoration: underline;
}
/* Center hero panel */
.wiki-home-center {
flex: 2 1 320px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
background: var(--wh-panel);
border: 1px solid var(--wh-border);
border-radius: 8px;
padding: 24px 20px;
}
.wiki-home-title {
font-size: 1em;
color: var(--wh-text-dim);
line-height: 1.4;
margin-bottom: 14px;
}
.wiki-home-title span {
display: block;
font-size: 1.8em;
font-weight: 700;
color: var(--wh-accent);
margin-top: 2px;
letter-spacing: 0.02em;
}
.wiki-home-logo {
margin: 8px 0 16px;
}
.wiki-home-logo img {
border-radius: 8px;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}
.wiki-home-description {
font-size: 0.95em;
color: var(--wh-text-dim);
max-width: 42em;
line-height: 1.6;
}
/* Stats numbers stand out */
.wiki-home-left b {
color: var(--wh-accent);
}
/* Stack on small screens */
@media (max-width: 780px) {
.wiki-home {
flex-direction: column;
}
.wiki-home-center {
order: -1;
}
}