MediaWiki:Gadget-VivahxTheme.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.

/**
 * Vivahx Retro Theme - Final Vector Layout Fix
 */

:root {
    --vhx-bg: #FDF5C6;
    --vhx-white: #FFFFFF;
    --vhx-sidebar-bg: #F2F2F2;
    --vhx-accent-green: #9ADA92;
    --vhx-border: #999999;
    --vhx-width: 808px;
    --vhx-logo-url: url("https://web.archive.org/web/20060825120444im_/http://www.vivahx.com/images/logo.jpg");
    --vhx-title-bg: url("https://web.archive.org/web/20060825120444im_/http://www.vivahx.com/images/fond_titre.jpg");
}

/* 1. Global Setup */
body {
    background-color: var(--vhx-bg) !important;
    font-family: Verdana, Tahoma, sans-serif !important;
    font-size: 12px !important;
}

/* 2. The Main Box */
#content, #mw-content-block, #footer {
    width: var(--vhx-width) !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

/* 3. Header and Logo[cite: 1, 7] */
#p-logo {
    position: relative !important;
    width: var(--vhx-width) !important;
    height: 100px !important;
    margin: 30px auto 0 auto !important;
    background: var(--vhx-logo-url) no-repeat left center #FAFDF6 !important;
    border: 1px solid var(--vhx-border);
    border-bottom: none;
    z-index: 100;
}
#p-logo a { display: block; width: 100%; height: 100%; background-image: none !important; }

/* 4. The Green Navigation Bar[cite: 1, 7] */
#mw-head {
    position: relative !important;
    width: var(--vhx-width) !important;
    height: auto !important;
    margin: 0 auto !important;
    background-color: var(--vhx-accent-green) !important;
    border: 1px solid var(--vhx-border);
    border-top: none;
    z-index: 99;
}

/* Styling tabs to look like the 2006 toolbar */
.vectorTabs, #p-cactions {
    background: none !important;
    display: flex !important;
    justify-content: center !important;
}
.vectorTabs li { background: none !important; border: none !important; }
.vectorTabs li a { 
    color: #333366 !important; 
    font-weight: bold !important; 
    padding: 10px 15px !important;
}

/* 5. Content Layout (Flex to prevent overlap) */
#mw-wrapper, .mw-body {
    width: var(--vhx-width) !important;
    margin: 0 auto !important;
    background: var(--vhx-white) !important;
    border: 1px solid var(--vhx-border);
    display: flex !important;
    flex-direction: row !important;
}

#content {
    flex: 1 !important;
    margin: 0 !important;
    border: none !important;
    padding: 25px !important;
    order: 1 !important;
}

/* 6. Sidebar Styled as the "Dock"[cite: 1, 7] */
#mw-panel {
    position: static !important; /* This stops the overlap */
    width: 200px !important;
    background-color: var(--vhx-sidebar-bg) !important;
    border-left: 1px solid #CCC;
    padding: 15px !important;
    order: 2 !important; /* Moves sidebar to the right */
}

/* Sidebar Box Styling[cite: 1] */
.portal, .mw-portlet {
    background: var(--vhx-white) !important;
    border: 1px solid var(--vhx-border) !important;
    margin-bottom: 15px !important;
    width: 170px !important;
}
.portal h3, .mw-portlet h3 {
    background: var(--vhx-title-bg) repeat-x !important;
    color: #000 !important;
    font-size: 11px !important;
    font-weight: bold !important;
    height: 25px !important;
    line-height: 25px !important;
    padding-left: 10px !important;
    border-bottom: 1px solid var(--vhx-border);
    text-transform: none !important;
}

/* 7. Retro Cleanup[cite: 1] */
#mw-page-base, #mw-head-base, #mw-panel-base, .mw-jump-link { display: none !important; }
h1.firstHeading { color: #333366; border-bottom: 1px solid var(--vhx-accent-green); }

/* Sidebar arrow bullet points[cite: 7] */
#mw-panel li { list-style: none !important; margin: 0 !important; padding: 2px 0 !important; }
#mw-panel li a::before { content: "» "; font-weight: bold; }