MediaWiki:Common.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.
/* 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;
}