MediaWiki:Common.css: Difference between revisions

Latest revision as of 10:57, 20 September 2026

/* CSS placed here will be applied to all skins */
/* Use IDs (#) when there is only one concurrence per page */
/* Use classes (.) when there are one or more occurrences per page */

.noautonum .tocnumber {
    display: none;
}
.coupontable {
    border-collapse: collapse;
    margin: 1em auto 1em auto;
    width: 100%;
    background: #FFFFCC;
    text-align: center;
}
.coupontable td {
    font-size: 1em;
    border: 1px solid #98bf21;
    font-weight: bold;
    font-family: Comic Sans MS;
}
.starbanner {                            /* Usage: {| class="starbanner" Star Banner Table */
    border: 1px solid gray;
    background: #FFFFCC;                 /* Light Yellow */
    width: 62em;
    margin: 3em auto 3em auto;
}
.fidelitybanner {                            /* Usage: {| class="fidelitybanner" Star Banner Table */
    border: 1px solid gray;
    background: #FFFFCC;                 /* Light Yellow */
    width: 62em;
    margin: 1em auto 1em auto;
}
.wallofgloryh4 {                         /* Usage: <div class="wallofgloryh4">Wall of Glory Headings</div> */
    background: #FFFF99;                 /* Yellow */
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    padding: 0.2em 0.4em;
    margin: auto
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
}
.quote_heading {
    font-weight: bold;
    color: #296F39;
}
.quotelink {                          /* Usage: <span class="quotelink">vaniquotes.org</span> for quote boxes */
    font-size: 1em;
    font-weight: bold;
    color: #296F39;                   /* #296F39=green */
}

/* <pre><nowiki> */

/* Don't display some stuff on the main page */
body.page-Main_Page #t-cite,
body.page-Main_Page #lastmod, 
body.page-Main_Page #siteSub, 
body.page-Main_Page h1.firstHeading {
    display: none !important;
}
/* Remove white border from thumbnails */
div.thumb {
    border: none;
}
div.tright {
    border: none;
    margin: 0.5em 0 0.8em 1.4em;
}
div.tleft {
    border: none;
    margin: 0.5em 1.4em 0.8em 0;
}
.MainHeader h4 {
    margin: 0 !important;
    padding: 0.2em 0.4em;
}
/* Navigation */
#chap-nav  {
    float: left
}
#verse-nav {
    float: right;
}
#prev-link {
    float: left;
    min-height: 22px;
    padding: 0 0 0 25px;
    background: url(/wiki/images/9/92/Go-previous.png) no-repeat left
}
#next-link {
    float: left;
    min-height :22px;
    padding: 0 25px;
    background: url(/wiki/images/5/5d/Go-next.png) no-repeat right
}
.highlight_terms {
    background-color: #EEE8AA;
}
         /* New stuff, sort out later  */
body.page-Main_Page h2, body.page-Talk_Main_Page h2 {
    background: #f9f9f9;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    padding: 0.3em;
    margin: 1em 0;
    color: #B5BD64;
    font-family: georgia;
    font-weight: bold;
    text-align: center;
}
#mainbanner {
    text-align: center;
    background: #a36a00; 
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    padding: 0.3em;
    color: #fdc88a;
    font-family: georgia;
    font-size: 150%;
    font-style: italic;
}
#mainlinks {
    text-align: center;
    margin-bottom: 0.5em
}
#mainlinks a {
    color: #B5BD64
}
#mainfeature h2, #maincontent h2, #mainexplanation h2, #mainprabhupada h2, #mainhelp h2, #mainresources h2 {
    background: #f9f9f9;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    color: #B5BD64;
    font-family: georgia;
    font-weight: bold;
    text-align: center;
    padding: 0.3em;
    margin: 1em 0;
}
#mainmantra {
    text-align: center;
    margin-top: 1.5em;
    color: #B5BD64;
}
.maincenter {
    text-align: center;
    width: auto; 
    margin-left: auto; 
    margin-right: auto;
}
.mainleft {
    text-align: left;
    max-width: 80%;
    margin: 0px auto;
    padding-bottom: 1em;
}
.mainjustify {
    text-align: justify;
    max-width: 65em;
    margin: 0px auto;
    padding-bottom: 1em;
}
body {
    background:#fdc88a;
    font-family: tahoma;
}
#lastmod {
    display: none
}
#p-logo a, #p-logo a:hover {
    height: 190px;
}
#column-one {
    padding-top: 190px;
}
/* Gallery */ /* table.gallery {width:100%;} */
div.gallerybox {
}
div.gallerybox div.thumb {
    border: none;
    width:auto !important;
}
/* </nowiki></pre> */

/* ==========================================================================
   VECTOR 2022 MODERNIZATION — VANIMEDIA
   Preserves the original Vanimedia classes above.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VECTOR 2022 BASE / VANIMEDIA COLOURS
   -------------------------------------------------------------------------- */

:root,
.skin-vector-2022,
html {
    --background-color-base: #fdc88a !important;
    --background-color-page: #fdc88a !important;
    --background-color-quiet: #fdc88a !important;
    --border-color-base: transparent !important;
}

body,
#content,
.mw-body,
#mw-page-base,
#mw-head-base {
    background: #fdc88a !important;
    background-image: none !important;
    font-family: tahoma;
}

.mw-page-container,
.mw-page-container-inner,
.mw-content-container,
.mw-header,
.vector-header-container,
.vector-sticky-header,
.vector-column-start,
.vector-column-end,
.vector-sidebar-container,
.vector-pinnable-element,
.vector-toc,
#vector-toc,
.vector-toc-pinned-container,
.vector-toc-contents,
.vector-dropdown-content,
.vector-menu-content,
.cdx-menu,
.cdx-menu__list {
    background-color: #fdc88a !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* --------------------------------------------------------------------------
   2. GENERAL VECTOR CLEANUP
   -------------------------------------------------------------------------- */

#lastmod {
    display: none !important;
}

div.thumb {
    border: none;
}

div.tright {
    border: none;
    margin: 0.5em 0 0.8em 1.4em;
}

div.tleft {
    border: none;
    margin: 0.5em 1.4em 0.8em 0;
}

/* Legacy MonoBook-only positioning is irrelevant in Vector 2022. */
.skin-vector-2022 #p-logo,
.skin-vector-2022 #column-one {
    padding-top: 0 !important;
}

/* --------------------------------------------------------------------------
   3. VECTOR MAIN MENU / SIDEBAR
   -------------------------------------------------------------------------- */

#vector-main-menu-pinned-container,
.vector-main-menu-pinned-container,
.vector-pinnable-header,
.vector-main-menu-action,
.vector-pinnable-header-toggle-button,
.vector-pinnable-header-pin-button,
.vector-pinnable-header-unpin-button,
[data-event-name*="vector-main-menu.pin"],
[data-event-name*="vector-main-menu.unpin"] {
    display: none !important;
}

#vector-main-menu-dropdown .vector-dropdown-content {
    background-color: #fff3e3 !important;
    border: 1px solid #a36a00 !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.22) !important;
}

html:not(.skin-theme-clientpref-night) .vector-sidebar-container {
    background-color: #f3b96f !important;
    --background-color-interactive: #f3b96f !important;
}

html:not(.skin-theme-clientpref-night) #vector-main-menu .vector-menu-heading,
html:not(.skin-theme-clientpref-night) .vector-dropdown-content .vector-menu-heading {
    background-color: #a36a00 !important;
    color: #ffffff !important;
    border-radius: 4px !important;
    padding: 8px 12px !important;
    margin-bottom: 4px !important;
}

html:not(.skin-theme-clientpref-night) #vector-main-menu .mw-list-item a,
html:not(.skin-theme-clientpref-night) #vector-toc .vector-toc-link {
    color: #7a4d00 !important;
}

html:not(.skin-theme-clientpref-night) #vector-main-menu .mw-list-item a:hover,
html:not(.skin-theme-clientpref-night) #vector-toc .vector-toc-link:hover {
    color: #0645ad !important;
    background-color: #f3d19f !important;
    border-radius: 2px !important;
}

/* --------------------------------------------------------------------------
   4. STICKY HEADER
   -------------------------------------------------------------------------- */

#vector-sticky-header .vector-sticky-header-search-toggle,
#vector-sticky-header #vector-sticky-header-search-toggle,
#vector-sticky-header .search-toggle,
#vector-sticky-header .mw-ui-icon-wikimedia-search,
#vector-sticky-header .mw-ui-icon-search,
#vector-sticky-header .vector-icon.mw-ui-icon-search,
#vector-sticky-header .cdx-search-input__start-icon {
    display: none !important;
}

.skin-vector-2022 #vector-sticky-header,
#vector-sticky-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    background-color: #f3b96f !important;
    border-bottom: 2px solid #a36a00 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    height: 50px !important;
    min-height: 50px !important;
}

.skin-vector-2022 #vector-sticky-header .vector-sticky-header-start,
#vector-sticky-header .vector-sticky-header-start {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    position: relative !important;
    z-index: 10 !important;
    gap: 18px !important;
    margin: 0 !important;
}

#vanipedia-sticky-main-menu {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 20 !important;
}

#vanipedia-sticky-main-menu .vector-icon {
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
}

#vector-sticky-header #p-search,
#vector-sticky-header form#searchform,
#vector-sticky-header .vector-search-box,
#vector-sticky-header .vector-search-box-inner,
#vector-sticky-header .cdx-search-input {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    z-index: 10 !important;
}

#vector-sticky-header input.searchbox,
#vector-sticky-header input[type="search"] {
    position: relative !important;
    left: auto !important;
    margin: 0 !important;
}

.skin-vector-2022 #vector-sticky-header .vector-sticky-header-context-bar,
#vector-sticky-header .vector-sticky-header-context-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    margin-left: 20px !important;
    margin-right: auto !important;
}

#vector-sticky-header .vector-sticky-header-context-bar-primary,
#vector-sticky-header .vector-sticky-header-title,
#vector-sticky-header .vector-sticky-header-context-bar .mw-headline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    color: #000000 !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.skin-vector-2022 #vector-sticky-header .vector-sticky-header-end,
#vector-sticky-header .vector-sticky-header-end {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
}

#vector-main-menu.vanipedia-sidebar-menu.vanipedia-collapsed {
    display: none !important;
}

/* --------------------------------------------------------------------------
   5. BACK TO TOP
   -------------------------------------------------------------------------- */

#vanipedia-back-to-top {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background-color: #a36a00 !important;
    color: #ffffff !important;
    border: none !important;
    outline: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important;
    z-index: 1000 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(12px) !important;
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease, background-color 0.2s ease !important;
}

#vanipedia-back-to-top.visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

#vanipedia-back-to-top:hover {
    background-color: #7a4d00 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.3) !important;
}

#vanipedia-back-to-top svg {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    stroke: #ffffff !important;
}

/* --------------------------------------------------------------------------
   6. MOBILE
   -------------------------------------------------------------------------- */

@media screen and (max-width: 768px) {
    .mw-parser-output img {
        max-width: 100%;
        height: auto !important;
    }

    #vanipedia-back-to-top {
        bottom: 18px !important;
        right: 18px !important;
        width: 40px !important;
        height: 40px !important;
    }
}

/* --------------------------------------------------------------------------
   7. DARK MODE
   -------------------------------------------------------------------------- */

html.skin-theme-clientpref-night {
    --background-color-base: #121212 !important;
    --background-color-page: #121212 !important;
    --background-color-quiet: #1a1a1a !important;
    --color-base: #e2e8f0 !important;
}

html.skin-theme-clientpref-night body,
html.skin-theme-clientpref-night #content,
html.skin-theme-clientpref-night .mw-body,
html.skin-theme-clientpref-night #mw-page-base,
html.skin-theme-clientpref-night #mw-head-base {
    background: #121212 !important;
    color: #e2e8f0 !important;
}

html.skin-theme-clientpref-night .mw-page-container,
html.skin-theme-clientpref-night .mw-page-container-inner,
html.skin-theme-clientpref-night .mw-content-container,
html.skin-theme-clientpref-night .mw-header,
html.skin-theme-clientpref-night .vector-header-container,
html.skin-theme-clientpref-night .vector-sticky-header,
html.skin-theme-clientpref-night .vector-column-start,
html.skin-theme-clientpref-night .vector-column-end,
html.skin-theme-clientpref-night .vector-sidebar-container,
html.skin-theme-clientpref-night .vector-pinnable-element,
html.skin-theme-clientpref-night .vector-toc,
html.skin-theme-clientpref-night #vector-toc,
html.skin-theme-clientpref-night .vector-toc-pinned-container,
html.skin-theme-clientpref-night .vector-toc-contents,
html.skin-theme-clientpref-night .vector-menu-content,
html.skin-theme-clientpref-night .vector-appearance-pinned-container,
html.skin-theme-clientpref-night .vector-page-toolbar-container,
html.skin-theme-clientpref-night .vector-page-toolbar,
html.skin-theme-clientpref-night .cdx-menu,
html.skin-theme-clientpref-night .cdx-menu__list,
html.skin-theme-clientpref-night #vector-appearance {
    background-color: #121212 !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    color: #e2e8f0 !important;
}

html.skin-theme-clientpref-night #vector-sticky-header {
    background-color: #1a1a1a !important;
    border-bottom: 2px solid #a36a00 !important;
}

/* --------------------------------------------------------------------------
   8. VECTOR 2022 STANDARD WIDTH — TRUE VIEWPORT CENTERING
   This is the final centering method established on Vaniquotes.
   -------------------------------------------------------------------------- */

@media screen and (min-width: 1000px) {
    html.vector-feature-limited-width-clientpref-1 .mw-page-container {
        max-width: 99.75rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    html.vector-feature-limited-width-clientpref-1 .mw-content-container {
        max-width: none !important;
    }

    html.vector-feature-limited-width-clientpref-1 main#content.mw-body {
        width: 70rem !important;
        max-width: 70rem !important;
        position: relative !important;
        left: 50vw !important;
        transform: translateX(-50%) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    html.vector-feature-limited-width-clientpref-1 #bodyContent {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }
}

/* Sitenotice social icons */
#siteNotice .inline-gallery {
    width: 100% !important;
    text-align: center !important;
}

#siteNotice .inline-gallery ul.gallery {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 12px 0 !important;
    padding: 0 !important;
}

#siteNotice .inline-gallery ul.gallery li.gallerybox {
    float: none !important;
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

#siteNotice .inline-gallery .thumb {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}