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.
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap');
/* ─────────────────────────────────────────────────────────
Base & Background
───────────────────────────────────────────────────────── */
html, body {
margin: 0; padding: 0;
font-family: 'Cinzel', Georgia, serif;
background: url('/images/wiki_background.png') center center fixed no-repeat;
background-size: cover;
color: #333;
}
/* ─────────────────────────────────────────────────────────
Header (top bar)
───────────────────────────────────────────────────────── */
#mw-head {
clear: both;
background: #4B0082;
border-bottom: 3px solid #F28C28;
padding: 0.75em 2em;
position: relative; z-index: 20;
}
/* Personal tools (login/watchlist/etc) */
#p-personal ul {
display: flex; list-style: none;
margin: 0; padding: 0.5em;
}
#p-personal li + li { margin-left: 1em; }
#p-personal a {
color: #4B0082 !important;
text-decoration: none;
}
#p-personal a:hover {
color: #E67E22 !important;
}
/* Search */
#p-search {
float: right;
padding: 0.5em;
}
#p-search form {
display: flex;
}
#p-search input[type="search"] {
padding: 0.3em 0.5em;
border: 1px solid #ccc;
border-radius: 4px 0 0 4px;
}
#p-search button {
padding: 0.3em 0.6em;
border: 1px solid #ccc;
border-left: none;
border-radius: 0 4px 4px 0;
background: #4B0082;
color: #fff;
cursor: pointer;
}
/* ─────────────────────────────────────────────────────────
Page action tabs (View/Edit/History)
───────────────────────────────────────────────────────── */
#p-cactions ul {
display: flex; list-style: none;
margin: 1em 2em; padding: 0;
}
#p-cactions li + li { margin-left: 0.5em; }
#p-cactions a {
display: block;
padding: 0.3em 0.6em;
background: #fff;
border: 1px solid #ccc;
border-radius: 4px;
color: #229C88;
text-decoration: none;
}
#p-cactions li.selected a {
background: #E0D6F9;
border-color: #4B0082;
color: #4B0082;
}
/* ─────────────────────────────────────────────────────────
Sidebar (float layout)
───────────────────────────────────────────────────────── */
#mw-panel {
float: left;
width: 260px;
margin: 1.5em;
background: rgba(255,255,255,0.95);
padding: 1em;
border-radius: 8px;
box-shadow: 0 3px 10px rgba(0,0,0,0.2);
z-index: 10;
}
.mw-portlet {
margin-bottom: 1.5em;
}
.mw-portlet .mw-portlet-heading {
font-weight: bold;
margin-bottom: 0.5em;
}
.mw-portlet ul {
list-style: none;
margin: 0; padding: 0;
}
.mw-portlet li {
margin: 0.3em 0;
}
.mw-portlet a {
color: #4B0082;
text-decoration: none;
}
.mw-portlet a:hover {
color: #E67E22;
}
/* ─────────────────────────────────────────────────────────
Main Content (cleared float)
───────────────────────────────────────────────────────── */
#content {
margin: 1.5em 2em 2em calc(260px + 1.5em);
background: rgba(255,255,255,0.95);
padding: 2em;
border-radius: 8px;
box-shadow: 0 3px 12px rgba(0,0,0,0.1);
clear: right;
overflow: visible;
}
#mw-content-text {
margin: 0; padding: 0;
}
/* ─────────────────────────────────────────────────────────
Headings & Links
───────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
font-family: 'Cinzel', serif;
color: #C0392B;
margin: 1em 0 0.5em;
}
a {
color: #229C88;
text-decoration: none;
}
a:hover {
color: #D645B1;
text-decoration: underline;
}
/* ─────────────────────────────────────────────────────────
Tables (RPG style)
───────────────────────────────────────────────────────── */
table.wikitable {
width: 100%;
border-collapse: collapse;
margin: 1.5em 0;
background: transparent;
}
table.wikitable caption {
background: #4B0082;
color: #fff;
padding: 0.5em;
font-weight: bold;
text-align: center;
}
table.wikitable th {
background: #E0D6F9;
color: #222;
border: 1px solid #ccc;
padding: 0.75em;
text-align: center;
}
table.wikitable td {
background: transparent;
border: 1px solid #ccc;
padding: 0.75em;
vertical-align: top;
}
/* ─────────────────────────────────────────────────────────
Footer (full width)
───────────────────────────────────────────────────────── */
#footer {
clear: both;
background: #4B0082;
color: #eee;
padding: 1em 2em;
text-align: center;
border-top: 2px solid #D645B1;
position: relative; z-index: 20;
}
#footer a {
color: #ddd !important;
margin: 0 0.5em;
font-size: 0.9em;
}
#footer a:hover {
color: #fff !important;
text-decoration: underline;
}
/* ─────────────────────────────────────────────────────────
Responsive: stack sidebar + content
───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
#p-personal, #p-search, #p-cactions {
float: none; display: block; margin: 0.5em 1em; text-align: center;
}
#mw-panel, #content {
float: none; width: auto; margin: 1em !important;
}
#content { clear: none; }
}