MediaWiki:Common.css: Difference between revisions

From Toon Wiki
(Add tabbed gallery, better quotes, navigation styles)
(Clone Avatar Wiki styling)
Line 1: Line 1:
/* ============================================
/* ============================================
   TOON WIKI - MODERN RESPONSIVE STYLING v2
   TOON WIKI - AVATAR WIKI STYLE CLONE
   ============================================ */
   ============================================ */


:root {
:root {
     --tw-primary: #1a4d7a;
     --aw-brown-dark: #611e03;
     --tw-primary-light: #2c5aa0;
     --aw-brown-medium: #8b4513;
     --tw-secondary: #f8f9fa;
     --aw-brown-light: #c8651d;
     --tw-border: #c8ccd1;
     --aw-cream: #fff8dc;
     --tw-text: #202122;
     --aw-cream-dark: #f5ecd3;
     --tw-text-muted: #72777d;
     --aw-text: #3a3a3a;
     --tw-link: #0645ad;
     --aw-text-light: #666;
     --tw-link-new: #ba0000;
     --aw-border: #d4c4a8;
     --tw-air: #FF9900;
     --aw-air: #ff9900;
     --tw-water: #003399;
     --aw-water: #1e90ff;
     --tw-earth: #006633;
     --aw-earth: #228b22;
     --tw-fire: #AA0000;
     --aw-fire: #cc0000;
     --tw-radius: 8px;
     --aw-radius: 6px;
     --tw-shadow: 0 2px 8px rgba(0,0,0,0.1);
     --aw-shadow: 0 2px 6px rgba(0,0,0,0.1);
    --tw-transition: 0.2s ease;
}
}


/* ===== Quote Box Styling ===== */
/* ===== Page Background ===== */
.quote-box {
body {
     transition: transform var(--tw-transition), box-shadow var(--tw-transition);
    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);
}
}
.quote-box:hover {
.mw-parser-output a {
     transform: translateY(-3px);
     color: var(--aw-brown-medium);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}
}
.quote-box a {
.mw-parser-output a:hover {
     color: inherit !important;
     color: var(--aw-brown-dark);
     text-decoration: underline;
     text-decoration: underline;
}
}
.quote-air { background: linear-gradient(135deg, #FF9900, #FF6600) !important; }
.mw-parser-output a.new {
.quote-water { background: linear-gradient(135deg, #0066CC, #003399) !important; }
    color: #ba0000;
.quote-earth { background: linear-gradient(135deg, #228B22, #006633) !important; }
}
.quote-fire { background: linear-gradient(135deg, #CC0000, #8B0000) !important; }


/* ===== Infobox Gallery Tabs ===== */
/* ===== Page Title ===== */
.infobox-image .gallery {
.mw-page-title-main {
     display: flex;
     color: var(--aw-brown-dark);
    flex-wrap: wrap;
     font-weight: bold;
     justify-content: center;
    gap: 0;
    margin: 0;
    padding: 0;
}
}
.infobox-image .gallerybox {
 
     flex: 1;
/* ===== Section Headers ===== */
     min-width: 120px;
.mw-parser-output h2 {
     max-width: 150px;
     border-bottom: 2px solid var(--aw-brown-dark);
     border: none;
     color: var(--aw-brown-dark);
    border-radius: 0;
     font-size: 1.4em;
     margin: 0;
     padding-bottom: 5px;
    background: #f0f0f0;
     margin-top: 1.5em;
    transition: all var(--tw-transition);
    cursor: pointer;
}
}
.infobox-image .gallerybox:hover {
.mw-parser-output h3 {
     background: #e0e0e0;
    color: var(--aw-brown-dark);
     transform: none;
     font-size: 1.15em;
     box-shadow: none;
     border-bottom: 1px solid var(--aw-border);
     padding-bottom: 3px;
}
}
.infobox-image .gallerybox:first-child {
.mw-parser-output h4 {
     border-radius: 8px 0 0 8px;
     color: var(--aw-brown-medium);
}
}
.infobox-image .gallerybox:last-child {
 
     border-radius: 0 8px 8px 0;
/* ===== 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;
}
}
.infobox-image .gallerybox .thumb {
.quote-box:hover {
     height: 100px !important;
     transform: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
}
.infobox-image .gallerybox img {
    max-height: 90px;
    width: auto;
    border-radius: 4px;
}
.infobox-image .gallerytext {
    background: transparent;
    font-size: 0.8em;
    font-weight: 600;
    color: var(--tw-primary);
    padding: 4px;
}
}
/* 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; }


/* ===== Infobox Improvements ===== */
/* ===== Character Infobox - Avatar Wiki Style ===== */
.character-infobox {
.character-infobox {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    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 {
.character-infobox th {
     font-weight: 600;
    background: var(--aw-cream) !important;
     color: #333;
    color: var(--aw-brown-dark) !important;
     vertical-align: top;
     font-weight: 600 !important;
     padding: 5px 8px !important;
     border-bottom: 1px solid var(--aw-border) !important;
    width: 35% !important;
}
}
.character-infobox td {
.character-infobox td {
     color: #444;
    background: white !important;
     vertical-align: top;
    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;
}
}
.character-infobox ul {
.infobox-image .gallerybox:hover {
     margin: 0;
     background: var(--aw-cream-dark) !important;
     padding-left: 16px;
    transform: none !important;
     box-shadow: none !important;
}
}
.character-infobox li {
.infobox-image .gallerybox .thumb {
     margin: 2px 0;
     height: 80px !important;
    padding: 5px !important;
}
}
 
.infobox-image .gallerybox img {
/* ===== Base Improvements ===== */
     max-height: 70px !important;
.mw-parser-output {
     border-radius: 3px !important;
     line-height: 1.7;
     font-size: 16px;
}
}
.mw-parser-output p {
.infobox-image .gallerytext {
     margin-bottom: 1em;
    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;
}
}
a.new {
 
     color: var(--tw-link-new);
/* ===== 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;
}
}


/* ===== Family Tree ===== */
/* ===== TOC - Avatar Wiki Style ===== */
.familytree {
.toc {
    margin: 1.5em 0;
     background: var(--aw-cream-dark) !important;
    padding: 1em;
     border: 1px solid var(--aw-border) !important;
     background: linear-gradient(135deg, #fafbfc, #f0f2f5);
     border-radius: var(--aw-radius) !important;
     border: 1px solid var(--tw-border);
     padding: 10px 15px !important;
     border-radius: var(--tw-radius);
     box-shadow: none !important;
     overflow-x: auto;
     box-shadow: var(--tw-shadow);
}
}
.family-tree-element {
.toc a {
     padding: 8px 12px;
     color: var(--aw-brown-medium) !important;
    background: white;
    border: 2px solid var(--tw-primary);
    border-radius: 6px;
    text-align: center;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all var(--tw-transition);
}
}
.family-tree-element:hover {
.toctitle h2 {
     background: var(--tw-primary);
     color: var(--aw-brown-dark) !important;
     color: white;
     border: none !important;
    font-size: 1.1em !important;
}
}
.family-tree-line-solid-right { border-right: 2px solid #666; }
.family-tree-line-solid-bottom { border-bottom: 2px solid #666; }
.family-tree-line-dashed-right { border-right: 2px dashed #999; }
.family-tree-line-dashed-bottom { border-bottom: 2px dashed #999; }


/* ===== Images ===== */
/* ===== Images ===== */
figure.mw-halign-left,
figure.mw-halign-left,
figure.mw-halign-right {
figure.mw-halign-right {
     border-radius: var(--tw-radius);
     border: 1px solid var(--aw-border) !important;
     overflow: hidden;
     border-radius: var(--aw-radius) !important;
    box-shadow: var(--tw-shadow);
     background: white !important;
     transition: transform var(--tw-transition);
    box-shadow: var(--aw-shadow) !important;
}
figure.mw-halign-left:hover,
figure.mw-halign-right:hover {
    transform: translateY(-4px);
}
}
figure figcaption {
figure figcaption {
     font-size: 0.9em;
     background: var(--aw-cream-dark) !important;
     color: var(--tw-text-muted);
     color: var(--aw-text) !important;
     padding: 8px 12px;
    font-size: 12px !important;
     background: var(--tw-secondary);
     padding: 6px 10px !important;
    text-align: center;
     border-top: 1px solid var(--aw-border) !important;
}
}


/* ===== Gallery ===== */
/* ===== Gallery ===== */
.gallery {
.gallery .gallerybox {
     margin: 1.5em 0;
     background: white !important;
     display: flex;
     border: 1px solid var(--aw-border) !important;
     flex-wrap: wrap;
     border-radius: var(--aw-radius) !important;
    gap: 10px;
    justify-content: center;
}
}
.gallerybox {
.gallery .gallerytext {
     background: white;
     background: var(--aw-cream-dark) !important;
    border: 1px solid var(--tw-border);
     color: var(--aw-text) !important;
     border-radius: var(--tw-radius);
     font-size: 12px !important;
     overflow: hidden;
    transition: all var(--tw-transition);
}
}
.gallerybox:hover {
 
     box-shadow: var(--tw-shadow);
/* ===== Family Tree ===== */
     transform: translateY(-4px);
.familytree {
     background: var(--aw-cream-dark) !important;
    border: 1px solid var(--aw-border) !important;
     border-radius: var(--aw-radius) !important;
}
}
.gallerytext {
.family-tree-element {
     font-size: 0.85em;
     background: white !important;
     padding: 8px;
     border: 2px solid var(--aw-brown-dark) !important;
     text-align: center;
     border-radius: 4px !important;
     background: var(--tw-secondary);
     color: var(--aw-text) !important;
}
}
 
.family-tree-element:hover {
/* ===== Section Headers ===== */
     background: var(--aw-brown-dark) !important;
h2 {
     color: white !important;
    border-bottom: 3px solid var(--tw-primary);
    padding-bottom: 0.5em;
    margin-top: 2em;
}
h2 .mw-headline {
     color: var(--tw-primary);
     font-size: 1.5em;
}
}
h3 .mw-headline {
.family-tree-element a {
     color: var(--tw-primary-light);
     color: var(--aw-brown-medium) !important;
    font-size: 1.2em;
}
}
 
.family-tree-element:hover a {
/* ===== TOC ===== */
     color: white !important;
.toc {
    background: linear-gradient(135deg, #fff, var(--tw-secondary));
    border: 1px solid var(--tw-border);
     border-radius: var(--tw-radius);
    padding: 1.5em;
    box-shadow: var(--tw-shadow);
    max-width: 400px;
}
}
.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 ===== */
.references {
.references {
     font-size: 0.9em;
     background: var(--aw-cream-dark) !important;
    color: var(--tw-text-muted);
     border: 1px solid var(--aw-border) !important;
     background: var(--tw-secondary);
     border-radius: var(--aw-radius) !important;
    padding: 1em;
     font-size: 12px !important;
     border-radius: var(--tw-radius);
    padding: 10px 15px !important;
     margin-top: 2em;
}
.reference a {
    color: var(--aw-brown-medium) !important;
}
}


/* ===== Categories ===== */
/* ===== Categories ===== */
#catlinks {
#catlinks {
     background: linear-gradient(135deg, #fff, var(--tw-secondary));
     background: var(--aw-cream-dark) !important;
     border: 1px solid var(--tw-border);
     border: 1px solid var(--aw-border) !important;
     border-radius: var(--tw-radius);
     border-radius: var(--aw-radius) !important;
    padding: 1em 1.5em;
     margin-top: 2em !important;
     margin-top: 3em;
}
     box-shadow: var(--tw-shadow);
#catlinks a {
     color: var(--aw-brown-medium) !important;
}
}


/* ===== Icons ===== */
/* ===== Imported Content Notice ===== */
#icons {
.imported-notice {
    float: right;
     background: var(--aw-cream-dark) !important;
    margin: 0 0 1em 1em;
     border: 1px solid var(--aw-border) !important;
    padding: 8px 12px;
     border-left: 4px solid var(--aw-brown-dark) !important;
     background: white;
    border: 1px solid var(--tw-border);
     border-radius: var(--tw-radius);
     box-shadow: var(--tw-shadow);
    display: flex;
    gap: 4px;
    align-items: center;
}
#icons img {
    transition: transform var(--tw-transition);
}
#icons img:hover {
    transform: scale(1.2);
}
}


/* ===== Sidebar Navigation ===== */
/* ===== Navbox ===== */
#mw-panel .vector-menu-content-list {
.navbox {
     padding: 0;
     background: var(--aw-cream-dark) !important;
}
     border: 1px solid var(--aw-border) !important;
#mw-panel .vector-menu-content-list li a {
    padding: 8px 12px;
     border-radius: 4px;
    transition: background var(--tw-transition);
}
}
#mw-panel .vector-menu-content-list li a:hover {
.navbox > div:first-child {
     background: rgba(26, 77, 122, 0.1);
     background: var(--aw-brown-dark) !important;
}
}


/* ===== Mobile Responsive ===== */
/* ===== Mobile Responsive ===== */
@media screen and (max-width: 768px) {
@media screen and (max-width: 768px) {
     .mw-parser-output {
     .character-infobox {
        font-size: 15px;
    }
    .infobox, .character-infobox {
         float: none !important;
         float: none !important;
         width: 100% !important;
         width: 100% !important;
Line 289: Line 293:
     figure.mw-halign-right {
     figure.mw-halign-right {
         float: none !important;
         float: none !important;
         margin: 1em 0 !important;
         margin: 1em auto !important;
         max-width: 100%;
         max-width: 100% !important;
     }
     }
     .quote-box {
     .quote-box {
         margin: 1em 0 !important;
         margin: 1em 0 !important;
        max-width: 100%;
     }
     }
     #icons {
     #icons {
         float: none;
         float: none !important;
         margin: 0 0 1em 0;
         margin: 0 0 1em 0 !important;
         flex-wrap: wrap;
         justify-content: center !important;
         justify-content: center;
         flex-wrap: wrap !important;
     }
     }
     .toc {
     .toc {
         max-width: 100%;
         max-width: 100% !important;
    }
    .familytree {
        display: block;
        overflow-x: auto;
     }
     }
}
}


/* ===== Engagement Features ===== */
/* ===== Smooth Scrolling ===== */
html {
html {
     scroll-behavior: smooth;
     scroll-behavior: smooth;
}
}
.mw-body-content a:not(.new):not(.reference):hover {
 
     background: rgba(26, 77, 122, 0.1);
/* ===== 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;
     border-radius: 2px;
    padding: 0 2px;
    margin: 0 -2px;
}
}

Revision as of 23:02, 22 December 2025

/* ============================================
   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"