MediaWiki:Common.css: Difference between revisions

Revision as of 04:56, 20 November 2025

/* ============================================================
   EQOA: Sandstorm WIKI THEME ΓÇö OPTION D (Classic EQ UI Palette)
   Applies to ALL pages, ALL namespaces, ALL skins (MonoBook primary)
   ============================================================ */

:root {
  /* BASE */
  --midnight: #0F1626;      /* Deep EQ-style indigo */
  --sand: #B9C4D1;          /* Soft blue-gray parchment */

  /* ACCENTS */
  --gold: #E3B44A;          /* Classic EverQuest gold */
  --sky: #6DA5E7;           /* EQ link blue */

  /* STATUS COLORS */
  --evergreen: #3E6B52;     /* success */
  --ember: #9A2E1E;         /* danger */

  /* BOX HEADER ACCENT */
  --box-header: #1C2B44;    /* EQ-style header blue */
}

/* ============================================================
   GLOBAL PAGE BACKGROUND & TEXT
   ============================================================ */

body {
  background: var(--midnight) !important;
  color: var(--sand) !important;
  font-family: "Georgia", "Times New Roman", serif;
}

#content,
#bodyContent,
#mw-content-text {
  color: var(--sand) !important;
}

/* ============================================================
   HEADINGS (GLOBAL OVERRIDES)
   ============================================================ */

h1, h2, h3, h4, h5, h6,
#firstHeading, .mw-first-heading,
.mw-body h1, .mw-body h2, .mw-body h3,
.mw-body h4, .mw-body h5, .mw-body h6 {
  color: var(--gold) !important;
  font-family: "Georgia", "Times New Roman", serif !important;
  font-weight: 700 !important;
  border: none !important;
}

/* Section header underline */
.mw-parser-output > h2 {
  border-bottom: 1px solid rgba(255,255,255,0.15) !important;
}

/* ============================================================
   LINKS
   ============================================================ */

a {
  color: var(--sky) !important;
}

a:visited {
  color: #5E8BC0 !important;
}

a:hover {
  color: var(--gold) !important;
}

/* ============================================================
   TABLES, ROWS, LISTS
   ============================================================ */

table,
.wikitable {
  background: #0A1420 !important;
  border: 1px solid var(--gold) !important;
}

.wikitable th {
  background: var(--box-header) !important;
  color: var(--gold) !important;
}

.wikitable td {
  color: var(--sand) !important;
  border-color: var(--gold) !important;
}

/* Alternating row accent */
tr:nth-child(even) {
  background: #121E30 !important;
}

/* ============================================================
   CUSTOM BOXES / PORTALS / HOMEPAGE SECTIONS
   ============================================================ */

.portal,
.navbox,
.multicol,
.mainpage-box,
.mainpage-header,
div.center-box,
div.portal,
#mp-topbanner,
#mp-left,
#mp-right {
  background: #0A1420 !important;
  border: 1px solid var(--gold) !important;
  color: var(--sand) !important;
}

/* Box headers */
.portal .portal-header,
.mainpage-header,
div.center-box .header,
h2.box-header,
.box-header {
  background: var(--box-header) !important;
  padding: 6px 10px !important;
  color: var(--gold) !important;
  font-size: 1.25em !important;
  text-align: center;
  border-bottom: 1px solid var(--gold) !important;
}

/* ============================================================
   SIDEBAR (MonoBook)
   ============================================================ */

#p-logo {
  background: transparent !important;
}

#p-navigation,
#p-interaction,
#p-tb,
#p-search {
  background: #0A1420 !important;
  border: 1px solid var(--gold) !important;
  color: var(--sand) !important;
}

#p-navigation h3,
#p-interaction h3,
#p-tb h3,
#p-search h3 {
  background: var(--box-header) !important;
  color: var(--gold) !important;
  padding: 4px 6px !important;
}

/* ============================================================
   INPUTS / SEARCH BOX
   ============================================================ */

input,
textarea {
  background: #142233 !important;
  color: var(--sand) !important;
  border: 1px solid var(--gold) !important;
}

/* ============================================================
   NOTICES / TEMPLATES
   ============================================================ */

.success,
.notice-success {
  background: var(--evergreen) !important;
  color: #DFF2E4 !important;
}

.warning,
.notice-warning {
  background: #3F2E00 !important;
  color: #FFDD8A !important;
}

.error,
.notice-error {
  background: var(--ember) !important;
  color: #F9D0C8 !important;
}

/* ============================================================
   FOOTER
   ============================================================ */

#footer {
  background: #0A1420 !important;
  color: var(--sand) !important;
  border-top: 1px solid var(--gold) !important;
}

/* ============================================================
   END OF THEME
   ============================================================ */


/* ============================================================
   TEMPLATE FIXES ΓÇö Infoboxes, Navboxes, NPC Tables, Main Page
   ============================================================ */

/* --- INFOboxes --- */
.infobox,
.infobox-npc,
.infobox table {
  background: #0A1420 !important;
  border: 1px solid var(--gold) !important;
  color: var(--sand) !important;
}

.infobox th,
.infobox-npc th {
  background: var(--box-header) !important;
  color: var(--gold) !important;
  border: 1px solid var(--gold) !important;
}

.infobox td,
.infobox-npc td {
  background: #0A1420 !important;
  color: var(--sand) !important;
  border: 1px solid var(--gold) !important;
}

/* --- NPC DETAIL TABLES --- */
.npc-table,
.npc-table table,
.zone-table,
.zone-table table {
  background: #0A1420 !important;
  border: 1px solid var(--gold) !important;
  color: var(--sand) !important;
}

.npc-table th,
.zone-table th {
  background: var(--box-header) !important;
  color: var(--gold) !important;
  border: 1px solid var(--gold) !important;
}

.npc-table td,
.zone-table td {
  background: #0A1420 !important;
  border: 1px solid var(--gold) !important;
  color: var(--sand) !important;
}

/* --- WIKITABLE OVERRIDES (ALL TABLES) --- */
table.wikitable td,
table.wikitable th {
  background: #0A1420 !important;
  color: var(--sand) !important;
  border: 1px solid var(--gold) !important;
}

table.wikitable th {
  background: var(--box-header) !important;
  color: var(--gold) !important;
}

/* --- Even row accents --- */
table tr:nth-child(even),
.wikitable tr:nth-child(even),
.npc-table tr:nth-child(even),
.zone-table tr:nth-child(even) {
  background: #121E30 !important;
}

/* --- MAIN PAGE BOXES --- */
.mainpage-box,
.mainpage-section,
.mainpage-area,
.portal-box,
.homepage-box {
  background: #0A1420 !important;
  border: 1px solid var(--gold) !important;
  color: var(--sand) !important;
}

.mainpage-box .header,
.mainpage-section .header,
.homepage-box .header,
.portal-box .header {
  background: var(--box-header) !important;
  color: var(--gold) !important;
  padding: 8px !important;
  text-align: center;
  font-size: 1.25em;
  border-bottom: 1px solid var(--gold) !important;
}

/* --- NOTES & SUBHEADERS --- */
h2,
h3 {
  color: var(--gold) !important;
  border-bottom: 1px solid rgba(255,255,255,0.15) !important;
}

span.notice,
div.notes,
div.section-note {
  background: #0A1420 !important;
  color: var(--sand) !important;
  padding: 6px 10px !important;
  border: 1px solid var(--gold) !important;
}

h2.right-header {
    margin: 0 !important;
    padding: 6px 10px !important;
}


body,
#globalWrapper,
#content,
#mw-page-base,
#mw-head-base {
    background-color: #0F1626 !important;
}


/* Style only the ONE specific table with ID mob-flag-legend */
#mob-flag-legend td {
    background-color: #1C2B44 !important;
    background-image: none !important;
    color: #E3B44A !important;
    border: none !important;
    text-align: center !important;
    font-size: 18px !important;   /* change to any size you want */
    font-family: "Trebuchet MS", "Verdana", sans-serif !important;
    padding: 0 !important;
}
#mob-flag-legend,
#mob-flag-legend * {
    background-color: #1C2B44 !important;
    background-image: none !important;
    color: #E3B44A !important;
}

#mob-flag-legend * {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
/* Style only the ONE specific table with ID mob-flag-legend */
#mob-leftcolumn td {
    text-align: center !important;
    font-size: 18px !important;   /* change to any size you want */
    font-family: "Trebuchet MS", "Verdana", sans-serif !important;
}

/* ============================
   NPC Template ΓÇö LEFT COLUMN
   Better Font + Text Size
   ============================ */

/* Left column container */
.npc-left-column {
    font-family: "Trebuchet MS", "Segoe UI", sans-serif !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    color: #B9C4D1 !important;
}

/* Labels (Job, Family, etc.) */
.npc-left-column td:first-child {
    font-size: 14px !important;
    font-weight: bold !important;
    letter-spacing: 0.5px;
}

/* Values (the right side of the table inside the left column) */
.npc-left-column td:last-child {
    font-size: 14px !important;
}

/* NPC Header text improvement */
.npc-left-column h2 {
    font-family: "Trajan Pro", "Georgia", serif !important;
    font-size: 20px !important;
    letter-spacing: 1px;
}

/* ===========================================
   NPC Template ΓÇö Notes / Factions Sections
   Better Font + Cleaner Text + Consistent Look
   =========================================== */

/* Section headers (Notes, Factions, Opposing Factions) */
.right-header {
    font-family: "Trajan Pro", "Georgia", serif !important;
    font-size: 20px !important;
    letter-spacing: 1px;
    color: #E3B44A !important;
    text-transform: uppercase;
}

/* Text inside the detail tables */
.eqoa-detail-table td {
    font-family: "Trebuchet MS", "Segoe UI", sans-serif !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: #B9C4D1 !important;
    padding: 8px 10px !important;
}

/* Table container adjustments */
.eqoa-detail-table {
    border: 1px solid #E3B44A !important;
    background-color: #0A1420 !important;
}

/* ===========================================
   NPC Template ΓÇö Notes / Factions / Opposing Text
   Target ONLY the {{{notes}}} {{{factions}}}
   and {{{opposingfactions}}} content
   =========================================== */

/* Notes cell */
.eqoa-detail-table td > div.notes,
.eqoa-detail-table td.notes {
    font-family: "Trebuchet MS", "Segoe UI", sans-serif !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    color: #B9C4D1 !important;
}

/* Factions cell */
.eqoa-detail-table td > div.factions,
.eqoa-detail-table td.factions {
    font-family: "Trebuchet MS", "Segoe UI", sans-serif !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    color: #B9C4D1 !important;
}

/* Opposing factions cell */
.eqoa-detail-table td > div.opposingfactions,
.eqoa-detail-table td.opposingfactions {
    font-family: "Trebuchet MS", "Segoe UI", sans-serif !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    color: #B9C4D1 !important;
}

/* ================================
   Unified border box for sections
   ================================ */

.eqoa-section-box {
    border: 2px solid #E3B44A !important;
    background-color: #0A1420 !important;
    margin: 10px 0;
    padding: 0;
}

/* Remove separate borders so it looks like one box */
.eqoa-section-box .right-header {
    border: none !important;
    margin: 0;
    padding: 8px 10px !important;
    background: #1C2B44 !important;
    color: #E3B44A !important;
}

.eqoa-section-box .eqoa-detail-table {
    border: none !important;
    width: 100%;
    background: #0A1420 !important;
}

.eqoa-section-box td {
    padding: 10px !important;
}

/* ================================
   MAIN PAGE ΓÇô GLOBAL BOX STYLE
   ================================ */

/* Outer border boxes */
.mp-box {
    border: 2px solid #E3B44A !important;
    background-color: #0A1420 !important;
    color: #B9C4D1 !important;
    padding: 0;
    margin-bottom: 12px;
}

/* Inner gray sections */
.mp-inner {
    background-color: #1C2B44 !important;
    padding: 10px;
    border: 1px solid #E3B44A;
}

/* Section headers (orange ones) */
.mp-section-title {
    background-color: #f68825 !important;
    color: white !important;
    padding: 6px 10px;
    border: 2px solid #E3B44A !important;
    text-align: center;
    font-weight: bold;
}

/* ================================
   TWO-COLUMN LAYOUT
   ================================ */
.mp-columns {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.mp-col {
    flex: 1;
    background-color: #1C2B44 !important;
    border: 1px solid #E3B44A !important;
    padding: 10px;
    color: #B9C4D1 !important;
}

/* Links inside columns */
.mp-col a {
    color: #E3B44A !important;
}

.mp-col a:hover {
    color: #ffffff !important;
}

/* ================================
   BOTTOM SECTION
   ================================ */
.mp-bottom {
    border: 2px solid #E3B44A !important;
    background-color: #0A1420 !important;
    color: #B9C4D1 !important;
}

.mp-bottom .mp-inner {
    background-color: #1C2B44 !important;
}

/* COUNT TEXT AT THE VERY BOTTOM */
.mp-count {
    color: #E3B44A !important;
    font-weight: bold;
}


/* ================================
   MAIN PAGE ΓÇô GLOBAL BOX STYLE
   ================================ */

/* Outer border boxes */
.mp-box {
    border: 2px solid #E3B44A !important;
    background-color: #0A1420 !important;
    color: #B9C4D1 !important;
    padding: 0;
    margin-bottom: 12px;
}

/* Inner gray sections */
.mp-inner {
    background-color: #1C2B44 !important;
    padding: 10px;
    border: 1px solid #E3B44A;
}

/* Section headers (orange ones) */
.mp-section-title {
    background-color: #f68825 !important;
    color: white !important;
    padding: 6px 10px;
    border: 2px solid #E3B44A !important;
    text-align: center;
    font-weight: bold;
}

/* ================================
   TWO-COLUMN LAYOUT
   ================================ */
.mp-columns {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.mp-col {
    flex: 1;
    background-color: #1C2B44 !important;
    border: 1px solid #E3B44A !important;
    padding: 10px;
    color: #B9C4D1 !important;
}

/* Links inside columns */
.mp-col a {
    color: #E3B44A !important;
}

.mp-col a:hover {
    color: #ffffff !important;
}

/* ================================
   BOTTOM SECTION
   ================================ */
.mp-bottom {
    border: 2px solid #E3B44A !important;
    background-color: #0A1420 !important;
    color: #B9C4D1 !important;
}

.mp-bottom .mp-inner {
    background-color: #1C2B44 !important;
}

/* COUNT TEXT AT THE VERY BOTTOM */
.mp-count {
    color: #E3B44A !important;
    font-weight: bold;
}