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.

/* ════════════════════════════════════════════════
   AetherKingdoms Wiki — Full Theme
   ════════════════════════════════════════════════ */

:root {
    --ak-card:       #f5f5f4;
    --ak-card2:      #e7e5e4;
    --ak-border:     #44403c;
    --ak-text:       #1c1917;
    --ak-text-dim:   #57534e;
    --ak-green:      #00a44f;
    --ak-orange:     #c86100;
    --ak-text-light: #fafaf9;
}

/* ── Sticky footer ───────────────── */
html, body {
  height: 100%;
  margin: 0;
}

#mw-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#mw-content-container{
  flex: 1;
}

/* ── Background ───────────────────────────────── */
body:after {
    content: "";
    position: fixed;
    top: 0;
    height: 100vh;
    left: 0;
    right: 0;
    z-index: -1;
    background: url('/assets/bg_village.png') center bottom;
    background-size: cover;
}

#mw-content-container {
    background: transparent !important;
    background-image: none !important;
}

/* ── Outer sidebars — transparent ────────────── */
#mw-site-navigation,
#mw-related-navigation {
    background: transparent !important;
    border: none !important;
    border-image: none !important;
    align-self: flex-start !important;
}

#mw-site-navigation { padding-left: 0 !important; }
#mw-related-navigation { padding-right: 0 !important; }

/* ── Logo — bordered ──────────────────────────── */
#p-logo {
    background: var(--ak-card2) !important;
    border-image: url('/assets/border_blue.png') 8 !important;
    border-width: 8px !important;
    border-style: solid !important;
    margin-bottom: 8px;
}

/* ── Inner panels ─────────────────────────────── */
.sidebar-chunk {
    background: var(--ak-card2) !important;
    border-image: url('/assets/border_blue.png') 8 !important;
    border-width: 8px !important;
    border-style: solid !important;
    margin-bottom: 8px;
}

/* ── Main content ─────────────────────────────── */
#mw-content {
    background: var(--ak-card) !important;
    border-image: url('/assets/border_blue2.png') 9 !important;
    border-width: 9px !important;
    border-style: solid !important;
    color: var(--ak-text) !important;
}

/* ── Header ───────────────────────────────────── */
#mw-head, #mw-head-base {
    background: transparent !important;
    border-image: url('/assets/border_blue2x2.png') 44 !important;
    border-width: 0 0 22px 0 !important;
    border-style: solid !important;
}

/* ── Footer ───────────────────────────────────── */
.mw-footer-container, .mw-footer, #mw-footer-container {
    background: #0c0a09 !important;
    border-top: 1px solid var(--ak-border) !important;
    color: var(--ak-text-light) !important;
}

/* ── Headings ─────────────────────────────────── */
h1, h2, h3, h4, h5, h6, #firstHeading {
    color: var(--ak-text) !important;
    font-family: 'Georgia', serif;
    border-bottom: 1px solid var(--ak-border) !important;
}

/* ── Links ────────────────────────────────────── */
a, a:visited { color: var(--ak-green) !important; }
a:hover { color: var(--ak-orange) !important; }
a.new, a.new:visited { color: #d94040 !important; }

/* ── Text ─────────────────────────────────────── */
.mw-body-content, #mw-content-text { color: var(--ak-text) !important; }

/* ── Tables ───────────────────────────────────── */
table { background: transparent !important; color: var(--ak-text) !important; border-color: var(--ak-border) !important; }
th { background: var(--ak-card2) !important; color: var(--ak-text) !important; border-color: var(--ak-border) !important; }
td { background: transparent !important; color: var(--ak-text) !important; border-color: var(--ak-border) !important; }

/* ── Inputs ───────────────────────────────────── */
input[type="text"], input[type="search"], input[type="password"], textarea {
    background: var(--ak-card) !important;
    color: var(--ak-text) !important;
    border-color: var(--ak-border) !important;
}

/* ── Misc ─────────────────────────────────────── */
.catlinks { background: var(--ak-card2) !important; border-color: var(--ak-border) !important; color: var(--ak-text-dim) !important; }
.wikitable, .infobox { background: var(--ak-card2) !important; border-color: var(--ak-border) !important; color: var(--ak-text) !important; }
.diff-addedline { background-color: rgba(0, 164, 79, 0.15) !important; }
.diff-deletedline { background-color: rgba(217, 64, 64, 0.15) !important; }

/* ── Scrollbar ────────────────────────────────── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0c0a09; }
::-webkit-scrollbar-thumb { background: var(--ak-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ak-orange); }

/* ── Blockquote (native) ──────────────────────── */
blockquote {
    margin: 1em 0 1em 1.5em;
    padding: 0.5em 1em;
    border-left: 3px solid var(--ak-border);
    color: var(--ak-text-dim);
    font-style: italic;
}

/* ── Callout boxes ────────────────────────────── */
.ak-callout {
    margin: 1.25em 0;
    padding: 0.65em 1em 0.75em;
    border-left: 4px solid var(--ak-border);
    background: var(--ak-card2);
    border-radius: 0 2px 2px 0;
}
.ak-callout-label {
    font-family: 'Georgia', serif;
    font-weight: bold;
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.3em;
    color: var(--ak-text-dim);
}

/* Lore — in-universe flavor text */
.ak-lore {
    border-left-color: #8a7560;
    background: #ede8df;
    font-style: italic;
}
.ak-lore .ak-callout-label {
    color: #8a7560;
    font-style: normal;
}

/* Tip — gameplay advice */
.ak-tip {
    border-left-color: var(--ak-green);
    background: rgba(0, 164, 79, 0.07);
}
.ak-tip .ak-callout-label { color: var(--ak-green); }

/* Warning — danger or cost */
.ak-warning {
    border-left-color: var(--ak-orange);
    background: rgba(200, 97, 0, 0.07);
}
.ak-warning .ak-callout-label { color: var(--ak-orange); }

/* Note — neutral info */
.ak-note {
    border-left-color: var(--ak-text-dim);
    background: var(--ak-card2);
}
.ak-note .ak-callout-label { color: var(--ak-text-dim); }