MediaWiki:Common.css

From Toon Wiki
Revision as of 23:02, 22 December 2025 by Admin (talk | contribs) (Clone Avatar Wiki styling)

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)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/* ============================================
   TOON WIKI - AVATAR WIKI STYLE CLONE
   ============================================ */

:root {
    --aw-brown-dark: #611e03;
    --aw-brown-medium: #8b4513;
    --aw-brown-light: #c8651d;
    --aw-cream: #fff8dc;
    --aw-cream-dark: #f5ecd3;
    --aw-text: #3a3a3a;
    --aw-text-light: #666;
    --aw-border: #d4c4a8;
    --aw-air: #ff9900;
    --aw-water: #1e90ff;
    --aw-earth: #228b22;
    --aw-fire: #cc0000;
    --aw-radius: 6px;
    --aw-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* ===== Page Background ===== */
body {
    background-color: #f4f4f4;
}
.mw-body {
    background: var(--aw-cream);
    border: 1px solid var(--aw-border);
    border-radius: var(--aw-radius);
}

/* ===== Typography ===== */
.mw-parser-output {
    font-size: 14px;
    line-height: 1.6;
    color: var(--aw-text);
}
.mw-parser-output a {
    color: var(--aw-brown-medium);
}
.mw-parser-output a:hover {
    color: var(--aw-brown-dark);
    text-decoration: underline;
}
.mw-parser-output a.new {
    color: #ba0000;
}

/* ===== Page Title ===== */
.mw-page-title-main {
    color: var(--aw-brown-dark);
    font-weight: bold;
}

/* ===== Section Headers ===== */
.mw-parser-output h2 {
    border-bottom: 2px solid var(--aw-brown-dark);
    color: var(--aw-brown-dark);
    font-size: 1.4em;
    padding-bottom: 5px;
    margin-top: 1.5em;
}
.mw-parser-output h3 {
    color: var(--aw-brown-dark);
    font-size: 1.15em;
    border-bottom: 1px solid var(--aw-border);
    padding-bottom: 3px;
}
.mw-parser-output h4 {
    color: var(--aw-brown-medium);
}

/* ===== Quote Box - Avatar Wiki Style ===== */
.quote-box {
    background: var(--aw-cream-dark) !important;
    border: 1px solid var(--aw-border) !important;
    border-left: 4px solid var(--aw-brown-dark) !important;
    border-radius: 0 var(--aw-radius) var(--aw-radius) 0 !important;
    color: var(--aw-text) !important;
    padding: 15px 20px !important;
    margin: 1em 0 !important;
    max-width: none !important;
    box-shadow: none !important;
}
.quote-box:hover {
    transform: none !important;
}
/* Nation-themed left border */
.quote-air { border-left-color: var(--aw-air) !important; }
.quote-water { border-left-color: var(--aw-water) !important; }
.quote-earth { border-left-color: var(--aw-earth) !important; }
.quote-fire { border-left-color: var(--aw-fire) !important; }

/* ===== Character Infobox - Avatar Wiki Style ===== */
.character-infobox {
    background: var(--aw-cream-dark) !important;
    border: 1px solid var(--aw-border) !important;
    border-radius: var(--aw-radius) !important;
    box-shadow: var(--aw-shadow) !important;
    width: 270px !important;
    font-size: 13px !important;
}
.character-infobox > div:first-child {
    background: var(--aw-brown-dark) !important;
    color: white !important;
    font-size: 1.2em !important;
    padding: 10px 12px !important;
}
.character-infobox th {
    background: var(--aw-cream) !important;
    color: var(--aw-brown-dark) !important;
    font-weight: 600 !important;
    padding: 5px 8px !important;
    border-bottom: 1px solid var(--aw-border) !important;
    width: 35% !important;
}
.character-infobox td {
    background: white !important;
    padding: 5px 8px !important;
    border-bottom: 1px solid #eee !important;
}
.character-infobox a {
    color: var(--aw-brown-medium) !important;
}

/* Infobox tabbed gallery */
.infobox-image {
    background: white !important;
    padding: 8px !important;
}
.infobox-image .gallery {
    margin: 0 !important;
    display: flex !important;
    justify-content: center !important;
    gap: 2px !important;
}
.infobox-image .gallerybox {
    border: 1px solid var(--aw-border) !important;
    border-radius: 4px !important;
    background: var(--aw-cream) !important;
    margin: 0 !important;
    flex: 1 !important;
    max-width: 130px !important;
}
.infobox-image .gallerybox:hover {
    background: var(--aw-cream-dark) !important;
    transform: none !important;
    box-shadow: none !important;
}
.infobox-image .gallerybox .thumb {
    height: 80px !important;
    padding: 5px !important;
}
.infobox-image .gallerybox img {
    max-height: 70px !important;
    border-radius: 3px !important;
}
.infobox-image .gallerytext {
    background: var(--aw-brown-dark) !important;
    color: white !important;
    font-size: 11px !important;
    font-weight: bold !important;
    padding: 3px 5px !important;
    text-align: center !important;
}

/* ===== Icons Bar ===== */
#icons {
    background: var(--aw-cream-dark) !important;
    border: 1px solid var(--aw-border) !important;
    border-radius: var(--aw-radius) !important;
    padding: 6px 10px !important;
    box-shadow: none !important;
}

/* ===== TOC - Avatar Wiki Style ===== */
.toc {
    background: var(--aw-cream-dark) !important;
    border: 1px solid var(--aw-border) !important;
    border-radius: var(--aw-radius) !important;
    padding: 10px 15px !important;
    box-shadow: none !important;
}
.toc a {
    color: var(--aw-brown-medium) !important;
}
.toctitle h2 {
    color: var(--aw-brown-dark) !important;
    border: none !important;
    font-size: 1.1em !important;
}

/* ===== Images ===== */
figure.mw-halign-left,
figure.mw-halign-right {
    border: 1px solid var(--aw-border) !important;
    border-radius: var(--aw-radius) !important;
    background: white !important;
    box-shadow: var(--aw-shadow) !important;
}
figure figcaption {
    background: var(--aw-cream-dark) !important;
    color: var(--aw-text) !important;
    font-size: 12px !important;
    padding: 6px 10px !important;
    border-top: 1px solid var(--aw-border) !important;
}

/* ===== Gallery ===== */
.gallery .gallerybox {
    background: white !important;
    border: 1px solid var(--aw-border) !important;
    border-radius: var(--aw-radius) !important;
}
.gallery .gallerytext {
    background: var(--aw-cream-dark) !important;
    color: var(--aw-text) !important;
    font-size: 12px !important;
}

/* ===== Family Tree ===== */
.familytree {
    background: var(--aw-cream-dark) !important;
    border: 1px solid var(--aw-border) !important;
    border-radius: var(--aw-radius) !important;
}
.family-tree-element {
    background: white !important;
    border: 2px solid var(--aw-brown-dark) !important;
    border-radius: 4px !important;
    color: var(--aw-text) !important;
}
.family-tree-element:hover {
    background: var(--aw-brown-dark) !important;
    color: white !important;
}
.family-tree-element a {
    color: var(--aw-brown-medium) !important;
}
.family-tree-element:hover a {
    color: white !important;
}
.family-tree-line-solid-right { border-right: 2px solid var(--aw-brown-medium) !important; }
.family-tree-line-solid-bottom { border-bottom: 2px solid var(--aw-brown-medium) !important; }

/* ===== References ===== */
.references {
    background: var(--aw-cream-dark) !important;
    border: 1px solid var(--aw-border) !important;
    border-radius: var(--aw-radius) !important;
    font-size: 12px !important;
    padding: 10px 15px !important;
}
.reference a {
    color: var(--aw-brown-medium) !important;
}

/* ===== Categories ===== */
#catlinks {
    background: var(--aw-cream-dark) !important;
    border: 1px solid var(--aw-border) !important;
    border-radius: var(--aw-radius) !important;
    margin-top: 2em !important;
}
#catlinks a {
    color: var(--aw-brown-medium) !important;
}

/* ===== Imported Content Notice ===== */
.imported-notice {
    background: var(--aw-cream-dark) !important;
    border: 1px solid var(--aw-border) !important;
    border-left: 4px solid var(--aw-brown-dark) !important;
}

/* ===== Navbox ===== */
.navbox {
    background: var(--aw-cream-dark) !important;
    border: 1px solid var(--aw-border) !important;
}
.navbox > div:first-child {
    background: var(--aw-brown-dark) !important;
}

/* ===== Mobile Responsive ===== */
@media screen and (max-width: 768px) {
    .character-infobox {
        float: none !important;
        width: 100% !important;
        margin: 1em 0 !important;
    }
    figure.mw-halign-left,
    figure.mw-halign-right {
        float: none !important;
        margin: 1em auto !important;
        max-width: 100% !important;
    }
    .quote-box {
        margin: 1em 0 !important;
    }
    #icons {
        float: none !important;
        margin: 0 0 1em 0 !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
    .toc {
        max-width: 100% !important;
    }
}

/* ===== Smooth Scrolling ===== */
html {
    scroll-behavior: smooth;
}

/* ===== Link Hover Effects ===== */
.mw-parser-output p a:hover,
.mw-parser-output li a:hover {
    background: rgba(139, 69, 19, 0.1);
    border-radius: 2px;
}
Retrieved from "https://toon.wiki/index.php?title=MediaWiki:Common.css&oldid=1857"