MediaWiki:Timeless.css

From The World of Haelora
Revision as of 20:39, 11 October 2026 by Teganlleuad (talk | contribs)

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.
/* ==========================================
   THE WORLD OF HAELORA
   Timeless Skin Customization
   ========================================== */

/* Main article background */
#mw-content {
    background-color: #FFFDF8;
    color: #292724;
    border: 1px solid #D5CBB9;
}

/* Outer content area */
#mw-content-container {
    background-color: #F4EFE4;
}

/* Main page title */
#firstHeading {
    font-family: Georgia, "Times New Roman", serif;
    color: #343743;
    border-bottom: 2px solid #B49A67;
    padding-bottom: 0.3em;
}

/* Article section headings */
#mw-content h2,
#mw-content h3,
#mw-content h4 {
    font-family: Georgia, "Times New Roman", serif;
    color: #343743;
}

#mw-content h2 {
    border-bottom: 1px solid #D5CBB9;
    padding-bottom: 0.2em;
}

/* Navigation panels */
#mw-site-navigation .sidebar-inner,
#mw-related-navigation .sidebar-chunk {
    background-color: #F8F3E9;
    border-color: #D5CBB9;
}

/* Links */
#mw-content a {
    color: #405A83;
}

#mw-content a:visited {
    color: #68577B;
}

#mw-content a:hover {
    color: #8A6938;
}

/* Tables */
#mw-content table.wikitable {
    background-color: #FFFDF8;
    border-color: #D5CBB9;
}

#mw-content table.wikitable th {
    background-color: #EAE1D1;
    color: #343743;
}

/* ==========================================
   HAELORA - REFINED PARCHMENT THEME
   ========================================== */

/* Outer background */
body,
#mw-content-container {
    background-color: #E9E0D1 !important;
}

/* Main article */
#mw-content {
    background-color: #F3EBDD !important;
    border: 1px solid #B49A67 !important;
    color: #292724;
}

/* Remove Timeless's default colored borders */
#mw-content-container {
    border-top: none !important;
    border-bottom: none !important;
}

/* Article heading */
#firstHeading {
    border-bottom: 2px solid #B49A67 !important;
}

/* Section headings */
#mw-content h2 {
    border-bottom: 1px solid #D5CBB9 !important;
}

/* Navigation panels */
#mw-site-navigation .sidebar-inner,
#mw-related-navigation .sidebar-chunk {
    background-color: #EDE3D3 !important;
    border-color: #B49A67 !important;
}

/* Horizontal rules */
#mw-content hr {
    border: 0;
    border-top: 1px solid #B49A67;
}

/* ==========================================
   HAELORA - TIMELESS HEADER & FOOTER
   ========================================== */

/* Replace Timeless's colored header stripe */
#mw-header-container {
    border-bottom: 5px solid #B49A67 !important;
}

/* Replace Timeless's colored footer stripe */
#mw-footer-container {
    border-top: 4px solid #B49A67 !important;
}

/* Improve footer readability */
#mw-footer-container,
#mw-footer-container a {
    color: #514B43 !important;
}

/* Blend navigation panels into parchment */
#mw-site-navigation .sidebar-chunk,
#mw-related-navigation .sidebar-chunk {
    background-color: #EDE3D3 !important;
    border: 1px solid #D5CBB9 !important;
}

/* ==========================================
   HAELORA - FINAL LAYOUT REFINEMENTS
   ========================================== */

/* Replace remaining default header colors */
#mw-header-container {
    border-bottom-color: #B49A67 !important;
}

#mw-header {
    border-bottom-color: #B49A67 !important;
}

/* Give the article a warmer parchment background */
#mw-content,
#mw-content .mw-parser-output,
#mw-content .mw-body-content {
    background-color: #F3EBDD !important;
}

/* Keep the page title area consistent */
#mw-content #firstHeading {
    background-color: #F3EBDD !important;
}

/* Make footer text readable */
#mw-footer-container,
#mw-footer-container *,
#mw-footer,
#mw-footer a {
    color: #514B43 !important;
}

/* Blend the navigation panels */
#mw-site-navigation .sidebar-inner,
#mw-site-navigation .sidebar-chunk,
#mw-related-navigation .sidebar-inner,
#mw-related-navigation .sidebar-chunk {
    background-color: #EDE3D3 !important;
    border-color: #D5CBB9 !important;
}/* ==========================================
   HAELORA - FINAL LAYOUT REFINEMENTS
   ========================================== */

/* Replace remaining default header colors */
#mw-header-container {
    border-bottom-color: #B49A67 !important;
}

#mw-header {
    border-bottom-color: #B49A67 !important;
}

/* Give the article a warmer parchment background */
#mw-content,
#mw-content .mw-parser-output,
#mw-content .mw-body-content {
    background-color: #F3EBDD !important;
}

/* Keep the page title area consistent */
#mw-content #firstHeading {
    background-color: #F3EBDD !important;
}

/* Make footer text readable */
#mw-footer-container,
#mw-footer-container *,
#mw-footer,
#mw-footer a {
    color: #514B43 !important;
}

/* Blend the navigation panels */
#mw-site-navigation .sidebar-inner,
#mw-site-navigation .sidebar-chunk,
#mw-related-navigation .sidebar-inner,
#mw-related-navigation .sidebar-chunk {
    background-color: #EDE3D3 !important;
    border-color: #D5CBB9 !important;
}

/* ==========================================
   HAELORA - CUSTOM HEADER COLOR BAR
   ========================================== */

/* Replace the red, blue, and green stripes */
#mw-header-hack .color-left,
#mw-header-hack .color-middle,
#mw-header-hack .color-right {
    background: #B49A67 !important;
    background-color: #B49A67 !important;
}

/* ==========================================
   HAELORA HOMEPAGE - WELCOME SECTION
   ========================================== */

.haelora-welcome {
    max-width: 850px;
    margin: 35px auto 45px;
    padding: 25px 35px;
    text-align: center;
    color: #292724;
}

.haelora-welcome-title {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    color: #343743;
    margin-bottom: 22px;
}

.haelora-welcome-intro {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.25rem;
    font-style: italic;
    line-height: 1.7;
    color: #514B43;
    margin-bottom: 18px;
}

.haelora-welcome-credit {
    font-size: 0.9rem;
    color: #756B5D;
    margin-top: 25px;
    padding-top: 18px;
    border-top: 1px solid #B49A67;
}

@media (max-width: 600px) {
    .haelora-welcome {
        padding: 20px 12px;
        margin: 20px auto 30px;
    }

    .haelora-welcome-intro {
        font-size: 1.1rem;
    }

/* ==========================================
   HAELORA HOMEPAGE - SPACING ADJUSTMENTS
   ========================================== */

/* Reduce space above the welcome section */
.haelora-welcome {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Reduce space below the logo */
body.page-Main_Page .mw-parser-output > p:first-child {
    margin-bottom: 0 !important;
}

/* ==========================================
   HAELORA - EXPLORE THE REALMS
   ========================================== */

.haelora-realms {
    max-width: 1100px;
    margin: 45px auto;
}

.haelora-realms > h2 {
    text-align: center;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2rem;
    color: #343743;
    margin-bottom: 30px;
    border-bottom: 1px solid #B49A67;
    padding-bottom: 12px;
}

.haelora-realm-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.haelora-realm-card {
    background: #EDE3D3;
    border: 1px solid #B49A67;
    padding: 25px;
    text-align: center;
    transition: background-color 0.2s ease;
}

.haelora-realm-card:hover {
    background: #E5D7C2;
}

.haelora-realm-card h3 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.5rem;
    margin: 0 0 12px;
    border: none;
}

.haelora-realm-card h3 a {
    color: #343743 !important;
    text-decoration: none;
}

.haelora-realm-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #514B43;
    margin: 0;
}

@media (max-width: 650px) {
    .haelora-realm-grid {
        grid-template-columns: 1fr;
    }

    .haelora-realm-card {
        padding: 20px;
    }
}

/* ==========================================
   HAELORA - REALM NAVIGATION GRID
   ========================================== */

#mw-content .haelora-realms {
    max-width: 1100px;
    margin: 35px auto 50px;
}

#mw-content .haelora-realms-heading {
    text-align: center;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2rem;
    color: #343743;
    border-bottom: 1px solid #B49A67;
    padding-bottom: 15px;
    margin-bottom: 30px;
}

#mw-content .haelora-realm-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

#mw-content .haelora-realm-card {
    background-color: #EDE3D3 !important;
    border: 1px solid #B49A67 !important;
    padding: 25px;
    text-align: center;
    min-width: 0;
}

#mw-content .haelora-realm-name {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.6rem;
    margin-bottom: 12px;
}

#mw-content .haelora-realm-name a {
    color: #343743 !important;
    text-decoration: none;
}

#mw-content .haelora-realm-name a:hover {
    color: #8A6938 !important;
    text-decoration: underline;
}

#mw-content .haelora-realm-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #514B43;
    margin: 0;
}

@media (max-width: 650px) {
    #mw-content .haelora-realm-grid {
        grid-template-columns: 1fr;
    }

    #mw-content .haelora-realm-card {
        padding: 20px;
    }
}
Retrieved from "https://wings.teganlleuad.com/index.php?title=MediaWiki:Timeless.css&oldid=20"