User:Simpsons88/vector.css

/****************************************************
 * WIKISIMPSONS - VECTOR 2010
 * Original design by Simpsons88
 * Complete consolidated stylesheet
 ****************************************************/

/* ================================================
   1. BACKGROUND AND LAYOUT
   ================================================ */

html {
    background: #53515C;
}

body.skin-vector-legacy {
    background-color: #53515C !important;
    background-image: linear-gradient(rgba(25, 23, 32, .48), rgba(25, 23, 32, .48)),
        url("https://i.imgur.com/y6Vp7Gs.jpeg") !important;
    background-repeat: repeat !important;
    background-position: left top !important;
    background-attachment: scroll !important;
    background-blend-mode: normal, luminosity !important;
}

/* Transparent Vector background layers */

#mw-page-base,
#mw-page-base2,
#mw-head {
    background: transparent !important;
    background-image: none !important;
}

/* White article container */

#content.mw-body {
    background: #E5E1E8 !important;
    background-image: none !important;
    border: 3px solid #A49AAA !important;
    border-radius: 5px !important;
    box-shadow: -0.5em -0.5em 3em rgba(83,81,92,.65);
    box-sizing: border-box;
    color: #201E24;
    font-family: "Trebuchet MS", sans-serif;
}

/* ================================================
   2. SIDEBAR
   ================================================ */

#mw-panel {
    background: transparent !important;
    padding: 0 7px !important;
    box-sizing: border-box !important;
}

/* Sidebar section containers */

#mw-panel .portal,
#mw-panel .vector-menu-portal {
    width: 100% !important;
    margin: 0 auto 8px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Grey sidebar headings */

#mw-panel .portal h3,
#mw-panel .vector-menu-heading {
    display: block !important;
    width: 100% !important;
    margin: 0 0 5px !important;
    padding: 4px 3px !important;
    box-sizing: border-box !important;

    background: rgba(119,113,127,.95) !important;
    background-image: none !important;
    border: 1px dotted #99939F !important;
    border-radius: 6px !important;

    color: #F6F4F7 !important;
    font-size: 14px !important;
    font-weight: bold !important;
    text-align: center !important;
    text-shadow: 1px 2px 2px #59535F;
    line-height: 1.3 !important;
}

/* Cream-yellow menu boxes */

#mw-panel .portal .body,
#mw-panel .vector-menu-content {
    display: block !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 5px !important;
    box-sizing: border-box !important;

    background: rgba(213,208,218,.88) !important;
    border: 3px solid #B1ABB7 !important;
    border-radius: 10px !important;
}

/* Remove default list spacing */

#mw-panel .portal ul,
#mw-panel .vector-menu-content-list {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Yellow sidebar buttons */

#mw-panel .portal li,
#mw-panel .vector-menu-content-list li {
    display: block !important;
    width: 100% !important;
    margin: 0 0 3px !important;
    padding: 0 !important;
    box-sizing: border-box !important;

    background: #B1ABB7 !important;
    border: 0 !important;
    border-bottom: 2px solid #D4D0D8 !important;
    border-radius: 5px !important;
    text-align: center !important;

    transition: background-color .15s ease;
}

#mw-panel .portal li a,
#mw-panel .vector-menu-content-list li a {
    display: block !important;
    padding: 4px 3px !important;

    color: #51465E !important;
    font-size: 11px !important;
    font-weight: bold !important;
    text-align: center !important;
    text-decoration: none !important;
    line-height: 1.3 !important;
    overflow-wrap: anywhere;
}

#mw-panel .portal li:hover,
#mw-panel .vector-menu-content-list li:hover {
    background: #817986 !important;
}

#mw-panel .portal li a:hover,
#mw-panel .vector-menu-content-list li a:hover {
    color: #29262D !important;
}

/* ================================================
   3. USER MENU
   ================================================ */

#p-personal {
    top: 8px !important;
    right: 15px !important;
    height: auto !important;
    padding: 5px 7px !important;

    background: rgba(0,0,0,.7) !important;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 6px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,.15);
}

/* Horizontal user links */

#p-personal ul {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}

#p-personal li {
    display: block !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* User links */

#p-personal li a {
    display: block !important;
    padding: 5px 8px !important;

    background: transparent !important;
    background-image: none !important;
    border-radius: 4px !important;

    color: #F6F4F7 !important;
    font-size: 12px !important;
    font-weight: bold !important;
    line-height: 1.3 !important;
    text-decoration: none !important;

    transition:
        background-color .15s ease,
        color .15s ease;
}

/* Hover */

#p-personal li a:hover,
#p-personal li a:focus-visible {
    background: #B1ABB7 !important;
    color: #29262D !important;
}

/* Logout hover */

#p-personal #pt-logout a:hover {
    background: linear-gradient(
        135deg,
        #8D7C8D,
        #665666
    ) !important;
    color: #29262D !important;
}

/* Remove default user icon background */

#p-personal #pt-userpage,
#p-personal #pt-anonuserpage {
    background: none !important;
}

/* ================================================
   4. PAGE TABS
   ================================================ */

#left-navigation,
#right-navigation,
#p-namespaces,
#p-views,
#p-cactions {
    background: transparent !important;
}

/* Remove Vector gradients */

.vectorTabs,
.vectorTabs ul,
.vectorMenu {
    background: transparent !important;
    background-image: none !important;
}

/* Tab buttons */

#p-namespaces li,
#p-views li {
    height: 38px !important;
    margin-right: 3px !important;

    background: #B1ABB7 !important;
    background-image: none !important;
    border: 1px solid #8B8492 !important;
    border-bottom: none !important;
    border-radius: 6px 6px 0 0 !important;

    transition: background-color .15s ease;
}

/* Tab links */

#p-namespaces li a,
#p-views li a {
    display: flex !important;
    align-items: center;
    justify-content: center;

    height: 100% !important;
    padding: 0 12px !important;

    background: transparent !important;
    background-image: none !important;

    color: #38343E !important;
    font-size: 12px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    white-space: nowrap;
}

/* Selected tab */

#p-namespaces li.selected,
#p-views li.selected {
    background: #DCD8E0 !important;
    border-color: #817986 !important;
    box-shadow: inset 0 3px 0 #817986;
}

/* Hover */

#p-namespaces li:hover,
#p-views li:hover {
    background: #817986 !important;
}

/* More dropdown */

#p-cactions h3 {
    height: 38px !important;
    box-sizing: border-box;
    background: #B1ABB7 !important;
    background-image: none !important;
    border: 1px solid #8B8492;
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
}

#p-cactions:hover h3 {
    background: #817986 !important;
}

/* ================================================
   5. SEARCH
   ================================================ */

#searchInput {
    background: rgba(255,255,255,.9) !important;
    border: 2px solid #817986 !important;
    border-radius: 6px !important;
    color: #201E24;
    box-sizing: border-box;
    transition: box-shadow .15s ease;
}

#searchInput:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(129,121,134,.3);
}

#searchInput::placeholder {
    color: #47434C;
    font-style: italic;
}

/* ================================================
   6. ARTICLE CONTENT
   ================================================ */

.mw-parser-output {
    font-family: "Trebuchet MS", sans-serif;
    color: #201E24;
}

/* Page title */

#firstHeading {
    margin: 0 -14px 5px !important;
    padding: 8px 10px;

    background: linear-gradient(#DED9E2,#D5CFDA);
    border-bottom: 1px solid #A49AAA !important;

    color: #201E24;
    font-size: 1.7em;
    font-weight: normal;
    text-shadow: 0 1px #F3F0F4;
}

/* Section headings */

.mw-parser-output h2 {
    background: #DAD4DF;
    border-bottom: 1px solid #A49AAA !important;
    color: #201E24;
    font-size: 1.3em;
    font-weight: normal;
}

.mw-parser-output h3 {
    border-bottom: 1px dotted #99939F !important;
    font-size: 1.17em;
}

/* Table of contents — refined Simpsons style */

#toc,
.toc {
    background: #D5CFDA !important;
    border: 2px solid #817986 !important;
    border-radius: 9px !important;
    box-shadow: 0 3px 8px rgba(0,0,0,.08);
    padding: 12px 16px !important;
    font-family: "Trebuchet MS", sans-serif;
}

#toctitle,
.toctitle {
    background: transparent !important;
    border-bottom: 1px solid #8B8492;
    padding-bottom: 7px !important;
    margin-bottom: 8px !important;
    text-align: left !important;
}

#toctitle h2,
.toctitle h2 {
    display: inline !important;
    background: transparent !important;
    border: 0 !important;
    color: #49434E !important;
    font-size: 15px !important;
    font-weight: bold !important;
    margin: 0 !important;
}

#toc a,
.toc a {
    color: #51465E !important;
    text-decoration: none !important;
    border-radius: 4px;
    transition: color .15s ease;
}

#toc a:hover,
.toc a:hover {
    color: #706078 !important;
    text-decoration: underline !important;
}

#toc ul,
.toc ul {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}

#toc li,
.toc li {
    padding: 3px 0 !important;
    line-height: 1.5 !important;
}

/* Thumbnail hover */

.thumbinner:hover {
    background: linear-gradient(
        #B1ABB7,
        white,
        #B1ABB7
    );
    border-color: #B1ABB7;
}

/* Interwiki links */

a.extiw {
    color: #655A72;
}

/* Responsive infobox */

@media screen and (max-width: 720px) {
    .mw-parser-output table.infobox {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin: 1em auto;
    }

    .mw-parser-output .infobox img {
        max-width: 100%;
        height: auto;
    }
}

/* ================================================
   7. FOOTER
   ================================================ */

#footer {
    position: relative;
    display: flow-root;

    width: auto !important;
    margin: 6px 1em 10px 11em !important;
    padding: 8px 12px !important;
    box-sizing: border-box;

    background: rgba(213,208,218,.85) !important;
    border: 3px solid #817986 !important;
    border-radius: 5px !important;
    box-shadow: -0.5em -0.5em 3em rgba(83,81,92,.65);

    color: #5B5360;
    font-size: 12px;
    text-shadow: 0 1px #D0CBD3;
    text-align: left;
}

/* Reset footer lists */

#footer ul {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Footer information and links */

#footer-info,
#footer-places {
    background: rgba(0,0,0,.55) !important;
    border-radius: 5px;
    padding: 4px 6px !important;
    margin: 3px 0 !important;
    float: none !important;
    width: fit-content;
    max-width: 100%;
}

#footer-info li,
#footer-places li {
    display: inline-block;
    color: #201E24;
    font-size: 11px;
    margin-right: 7px;
}

#footer a {
    color: #201E24;
    text-shadow: none;
}

#footer a:hover {
    color: #71647D;
}

/* License and MediaWiki badges */

#footer-icons {
    float: right !important;
    background: transparent !important;
    margin: 5px 0 !important;
    padding: 0 !important;
}

#footer-icons li {
    display: inline-block;
    margin-left: 5px;
    background: transparent !important;
}

#footer-icons img {
    max-width: 100%;
    height: auto;
}

/* ================================================
   8. RESPONSIVE ADJUSTMENTS
   ================================================ */

@media screen and (max-width: 1100px) {
    #p-personal li a {
        padding: 4px 5px !important;
        font-size: 11px !important;
    }

    #p-namespaces li a,
    #p-views li a {
        padding: 0 7px !important;
        font-size: 11px !important;
    }
}

@media screen and (max-width: 900px) {
    #footer {
        margin-left: 10em !important;
    }
}

@media screen and (max-width: 600px) {
    #footer {
        margin: 6px !important;
    }

    #footer-icons {
        float: none !important;
    }

    .mw-parser-output img {
        max-width: 100%;
        height: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    #p-personal li a,
    #p-namespaces li,
    #p-views li,
    #mw-panel li {
        transition: none !important;
    }
}


/************************************************
 * WIKISIMPSONS VECTOR 2010
 * Final layout and alignment refinements
 * Original design by Simpsons88
 ************************************************/

/* ============================================
   1. CENTER THE LEFT SIDEBAR
   ============================================ */

/* Align sidebar with its available space */

body.skin-vector-legacy #mw-panel {
    padding-left: 15px !important;
    padding-right: 0px !important;
    box-sizing: border-box !important;
}

/* Keep each sidebar section centered */

body.skin-vector-legacy #mw-panel .portal,
body.skin-vector-legacy #mw-panel .vector-menu-portal {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* Match headings and menu containers */

body.skin-vector-legacy #mw-panel .portal h3,
body.skin-vector-legacy #mw-panel .vector-menu-heading,
body.skin-vector-legacy #mw-panel .portal .body,
body.skin-vector-legacy #mw-panel .vector-menu-content {
    width: 100% !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ============================================
   2. REPEAT THE CLOUD BACKGROUND
   ============================================ */

html,
body.skin-vector-legacy {
    background-color: #53515C !important;
}

body.skin-vector-legacy {
    background-image:
        radial-gradient(ellipse at 50% 15%, #77717E 0%, #4A4652 42%, #25232C 100%) !important;

    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-attachment: fixed !important;
    background-size: cover !important;
}

/* Allow atmospheric background to remain visible */

body.skin-vector-legacy #mw-page-base,
body.skin-vector-legacy #mw-page-base2,
body.skin-vector-legacy #mw-head {
    background: transparent !important;
}

/* ============================================
   3. USER MENU VERTICAL SPACING
   ============================================ */

/* Move the personal toolbar upward */

body.skin-vector-legacy #p-personal {
    top: 3px !important;
    right: 15px !important;
    padding: 4px 7px !important;
    margin: 0 !important;
}

/* Slightly more compact links */

body.skin-vector-legacy #p-personal li a {
    padding: 4px 7px !important;
    line-height: 1.2 !important;
}

/* ============================================
   4. FIX WATCH / UNWATCH STAR
   ============================================ */

/* Prevent star text from overlapping */

body.skin-vector-legacy
#p-views li#ca-watch,
body.skin-vector-legacy
#p-views li#ca-unwatch {
    width: 38px !important;
    min-width: 38px !important;
    overflow: hidden !important;
}

/* Center the star link */

body.skin-vector-legacy
#p-views li#ca-watch a,
body.skin-vector-legacy
#p-views li#ca-unwatch a {
    display: block !important;
    width: 38px !important;
    height: 38px !important;
    box-sizing: border-box !important;

    padding: 0 !important;
    overflow: hidden !important;

    background-position: center center !important;
    background-repeat: no-repeat !important;

    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px !important;
    white-space: nowrap !important;
}

/* Ensure the watch icon remains visible */

body.skin-vector-legacy
#p-views li#ca-watch a,
body.skin-vector-legacy
#p-views li#ca-unwatch a {
    background-image: none !important;
}

/* Recreate the star using a pseudo-element */

body.skin-vector-legacy
#p-views li#ca-watch a::after,
body.skin-vector-legacy
#p-views li#ca-unwatch a::after {
    content: "☆";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 38px;

    color: #71647D;
    font-size: 25px !important;
    font-weight: normal;
    line-height: 38px !important;
    text-align: center;
    text-indent: 0 !important;
}

/* Filled star when watching */

body.skin-vector-legacy
#p-views li#ca-unwatch a::after {
    content: "★";
    color: #71647D;
}

/* Position pseudo-element relative to link */

body.skin-vector-legacy
#p-views li#ca-watch a,
body.skin-vector-legacy
#p-views li#ca-unwatch a {
    position: relative !important;
}

/* ============================================
   5. ALIGN FOOTER WITH CONTENT
   ============================================ */

/* Match footer horizontal boundaries
   to the main article container */

body.skin-vector-legacy #footer {
    margin-left: 14.6em !important;
    margin-right: 0 !important;
    width: auto !important;
    box-sizing: border-box !important;
}

/* Keep badges aligned to the right */

body.skin-vector-legacy #footer-icons {
    float: right !important;
    margin-right: 0 !important;
}

/* ============================================
   6. SMALL SCREEN SAFETY
   ============================================ */

@media screen and (max-width: 900px) {
    body.skin-vector-legacy #footer {
        margin-left: 10em !important;
        margin-right: 0 !important;
    }
}

@media screen and (max-width: 600px) {
    body.skin-vector-legacy #footer {
        margin: 6px !important;
        width: auto !important;
    }
}

/* Spooky grayscale Simpsons clouds (original image retained) */
body.skin-vector-legacy {
    background-color: #53515C !important;
    background-image: linear-gradient(rgba(25, 23, 32, .48), rgba(25, 23, 32, .48)),
        url("https://i.imgur.com/y6Vp7Gs.jpeg") !important;
    background-repeat: repeat !important;
    background-size: auto !important;
    background-position: left top !important;
    background-attachment: scroll !important;
    background-blend-mode: normal, luminosity !important;
}

body.skin-vector-legacy #mw-page-base,
body.skin-vector-legacy #mw-page-base2,
body.skin-vector-legacy #mw-head {
    background: transparent !important;
}


/* ============================================
   HALLOWEEN CLOUD BACKGROUND - REPEAT SAFETY
   Keep every cloud tile gray, including below the fold.
   ============================================ */

html,
body.skin-vector-legacy {
    background-color: #53515C !important;
    background-image:
        linear-gradient(
            rgba(25, 23, 32, 0.48),
            rgba(25, 23, 32, 0.48)
        ),
        url("https://i.imgur.com/y6Vp7Gs.jpeg") !important;
    background-repeat: repeat, repeat !important;
    background-size: auto, auto !important;
    background-position: left top, left top !important;
    background-attachment: scroll, scroll !important;
    background-blend-mode: normal, luminosity !important;
}

/* Keep Vector background layers transparent */
body.skin-vector-legacy #mw-page-base,
body.skin-vector-legacy #mw-page-base2,
body.skin-vector-legacy #mw-head {
    background: transparent !important;
    background-image: none !important;
}

/* ============================================
   HALLOWEEN ARTICLE FINISHING COLORS
   Scoped to article content; layout unchanged.
   ============================================ */

body.skin-vector-legacy #content.mw-body {
    background-color: #E5E1E8 !important;
    border-color: #A49AAA !important;
    color: #29252F !important;
}

body.skin-vector-legacy #content .mw-parser-output {
    color: #29252F;
}

body.skin-vector-legacy #content #firstHeading {
    background: linear-gradient(#DED9E2, #D5CFDA) !important;
    border-bottom-color: #A49AAA !important;
    color: #29252F !important;
    text-shadow: 0 1px #F1EEF3;
}

body.skin-vector-legacy #content .mw-parser-output h2 {
    background: #DAD4DF !important;
    border-bottom-color: #A49AAA !important;
    color: #29252F !important;
}

body.skin-vector-legacy #content .mw-parser-output h3,
body.skin-vector-legacy #content .mw-parser-output h4 {
    color: #38313F;
    border-color: #A49AAA !important;
}

body.skin-vector-legacy #content a:not(.new) {
    color: #51465E;
}

body.skin-vector-legacy #content a:not(.new):hover {
    color: #766383;
}

body.skin-vector-legacy #content #toc,
body.skin-vector-legacy #content .toc {
    background: #D5CFDA !important;
    border-color: #A49AAA !important;
}

/* Neutral table styling where MediaWiki uses standard wikitable */
body.skin-vector-legacy #content .wikitable {
    background-color: #DED9E2;
    border-color: #A49AAA;
    color: #29252F;
}

body.skin-vector-legacy #content .wikitable > tr > th,
body.skin-vector-legacy #content .wikitable > * > tr > th {
    background-color: #C9C2CF;
    border-color: #A49AAA;
    color: #29252F;
}

body.skin-vector-legacy #content .wikitable > tr > td,
body.skin-vector-legacy #content .wikitable > * > tr > td {
    border-color: #A49AAA;
}