MediaWiki:Timeless.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.

:root {
    --background-primary: #0c1102;
    --background-secondary: #0e2d36;
    --color-primary: #eee;
    --color-secondary: #d39636;
    --border-primary: #d39636;
    --font-primary: "Quicksand", Helvetica, sans-serif;
}

@media screen and (min-width: 1100px) {
    #mw-content {
        margin-top: 4.7em;
    }
}

#mw-content-container {
    background-color: var(--background-secondary);
    background-image: linear-gradient(to bottom, rgba(21, 59, 70, 0) 60%, var(--background-secondary) 100%), url("https://sourceworlds.wiki/wallaperezu.jpg");
    background-position: top center, top center;
    background-repeat: no-repeat, no-repeat;
    background-size: 100% 700px, 100% 700px;
}

#p-logo-text {
    display: none;
}

#mw-content {
    background-color: var(--background-primary);
    color: var(--color-primary);
    font-family: var(--font-primary);
    font-weight: 500;
    min-height: calc(100vh - 15em); /* Adjust the "15em" if you need it taller or shorter */
    border: 1px solid var(--border-primary);
}

#mw-site-navigation .sidebar-chunk,
#mw-related-navigation .sidebar-chunk {
    background: var(--background-primary);
    color: var(--color-primary);
    border-color: var(--border-primary);
}

a,
a.external,
a:visited {
    color: var(--color-secondary);
}

#mw-content-block a:hover,
#mw-site-navigation a:hover,
#mw-related-navigation a:hover,
#mw-footer-container a:hover {
    color: var(--color-secondary);
    text-decoration: underline;
}

#mw-content-block h1,
#mw-content-block h2,
#mw-content-block h3,
#mw-content-block h4,
#mw-content-block h5,
#mw-content-block h6 {
    font-family: var(--font-primary);
    font-weight: bold;
}

#mw-content-block a {
    font-family: var(--font-primary);
    font-weight: 500;
}

.toc {
    border: 1px solid var(--border-primary);
}

#mw-related-navigation {
    margin-top: 4.7em;
}

#mw-related-navigation .sidebar-chunk:first-child {
    margin-top: 0;
}

/** TO BE MOVED TO COMMON.CSS WHEN COSMOS IS DISABLED **/
.portable-infobox {
    width: 300px;
    background-color: rgb(10, 17, 24);
    border: 1px solid var(--background-secondary);
}

.portable-infobox .pi-secondary-background {
    padding: 7px 3px !important;
}

.portable-infobox .pi-title {
    text-align: center;
    background: var(--background-secondary) !important;
    border-radius: 0;
}

.portable-infobox .pi-header {
    margin: 0 6px !important;
    padding: 4px !important;
    font-size: 12px !important;
    width: 97%;
    text-align: center;
    margin-left: 0 !important;
    background: var(--background-secondary) !important;
    border-radius: 0;
}

.pi-caption {
    font-size: 12px;
    padding: 2px 0px 0px;
}

.portable-infobox .pi-border-color, 
.portable-infobox .pi-horizontal-group .pi-border-color {
    border: none;
}

.portable-infobox .pi-horizontal-group-item.pi-data-value {
    padding: 9px 9px;
    vertical-align: top;
}

.portable-infobox .pi-data-label, 
.portable-infobox .pi-data-value {
    font-size: 11px !important;
}

.portable-infobox .pi-item.pi-data.pi-item-spacing {
    background-color: #000;
}

.portable-infobox img {
    width: 100%;
}

#mw-header-container {
    background: var(--background-secondary);
    color: #fff;
}

.color-left, .color-middle, .color-right {
    background: var(--border-primary);
}

#firstHeading {
    font-weight: bold;
}

.mw-body h1.firstHeading {
    border-bottom: 2px solid var(--border-primary);
}

.selected.mw-list-item a {
    font-weight: bold !important;
}

#mw-page-header-links a {
    color: var(--color-secondary) !important;
}

.mw-body li.gallerybox div.thumb {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
}

@media screen and (max-width: 850px) {
    #mw-content-block {
        background: var(--background-secondary);
    }
}

.main-flex {
    display: flex;
    gap: 20px;
}

@media (max-width: 768px) {
    .main-flex {
        flex-direction: column;
    }
}

.mainpage-box-wiki {
    padding: 15px;
    background: var(--background-secondary);
}

.mainpage-box-wiki .header {
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
}

.mainpage-box-welcome .header {
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 10px;
    letter-spacing: 2px;
    line-height: 110%;
    font-size: 40px !important;
}

@media (max-width: 1300px) {
    #mw-related-navigation {
        margin-top: 0 !important;
    }
}

.mwe-popups .mwe-popups-container {
    background: var(--background-secondary) !important;
}

.mwe-popups {
    border-color: var(--border-primary);
}

.mwe-popups .mwe-popups-extract {
    color: var(--color-primary);
    font-family: 'Quicksand', Helvetica, sans-serif;
    font-weight: 500;
}

.mwe-popups .mwe-popups-extract:hover {
    color: var(--color-primary);
}

.mwe-popups .mwe-popups-extract[dir='ltr']::after {
    right: 0;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), var(--background-secondary) 50%);
}

.mwe-popups.flipped-y::after, 
.mwe-popups.mwe-popups-no-image-pointer::after {
    border-top: 11px solid var(--background-secondary) !important;
}

.interactive-maps-viewer__map.leaflet-container {
    background: #000;
}

.interactive-maps-viewer__legend {
    background: var(--background-secondary);
}

.leaflet-control-zoom-in, 
.leaflet-control-zoom-out {
    background: var(--background-secondary) !important;
}

.leaflet-control-zoom-in span, 
.leaflet-control-zoom-out span {
    color: white;
}

.leaflet-control-zoom-in span:hover, 
.leaflet-control-zoom-out span:hover {
    color: var(--color-secondary);
}

/* --- FIXED FOOTER & BACKGROUND SPACING --- */
#mw-footer-container {
    background: var(--background-primary) !important;
    padding-top: 1em;
    margin-top: 0 !important;
    border-top: 1px solid var(--border-primary);
}

/* Apply background color to base containers without touching #mw-content-container's image */
body, 
#mw-page-container {
    background-color: var(--background-primary) !important;
}

#mw-content-block {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}