MediaWiki:Common.css

From EQOA Sandstorm Wiki
Revision as of 10:34, 22 November 2025 by RenodorDev (talk | contribs)
Jump to navigationJump to search

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)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/* ============================================================
   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;
}












/* ============================================
   EQOA Sandstorm ΓÇô Main Page Theme Override
   Forces the same color scheme used in NPC/Quest templates
   ============================================ */

/* Overall background */
body.page-Main_Page #content,
body.page-Main_Page .mw-body {
    background: #0A1420 !important;
    color: #B9C4D1 !important;
}

/* --- TOP BANNER --- */
body.page-Main_Page .eqoa-main-banner,
body.page-Main_Page > div:first-of-type {
    background: #1C2B44 !important;
    border: 2px solid #E3B44A !important;
    font-family: "Trebuchet MS", "Segoe UI", sans-serif !important;
    font-size: 28px !important;
}

body.page-Main_Page .eqoa-main-banner div,
body.page-Main_Page > div:first-of-type div {
    background: #1C2B44 !important;
    color: #E3B44A !important;
    font-family: "Trebuchet MS", "Segoe UI", sans-serif !important;
    font-size: 19px !important;
}

/* --- SECTION HEADERS (orange) --- */
body.page-Main_Page h2 {
    background: #F68825 !important;
    color: #FFFFFF !important;
    border: 2px solid #E3B44A !important;
    padding: 5px !important;
    font-family: "Trebuchet MS", "Segoe UI", sans-serif !important;
    font-size: 19px !important;
}

/* --- MAIN PAGE BOX WRAPPERS --- */
body.page-Main_Page .mp-box,
body.page-Main_Page > div {
    background: #1C2B44 !important;
    border: 1px solid #E3B44A !important;
    color: #B9C4D1 !important;
    font-family: "Trebuchet MS", "Segoe UI", sans-serif !important;
    font-size: 19px !important;
}

/* Fix gray*


/* MAIN PAGE HEADER BAR COLORS */
#mw-content-text h2 {
    background-color: #F47600!important;
    color: #E3B44A !important;
    border: 2px solid #E3B44A !important;
    padding: 6px !important;
    text-align: center !important;
}

/* Remove the light gray background boxes under each header */
#mw-content-text > div,
#mw-content-text > div > div {
    background-color: #0A1420 !important;
    border-color: #E3B44A !important;
    color: #B9C4D1 !important;
}

/* Make the two-column blocks match EQOA theme */
#mw-content-text .flex-container,
#mw-content-text div[style*="display: flex"] {
    background-color: #0A1420 !important;
    border: 1px solid #E3B44A !important;
}

/* Left + Right column boxes */
#mw-content-text .flex-container > div,
#mw-content-text div[style*="display: flex"] > div {
    background-color: #0A1420 !important;
    border: 1px solid #E3B44A !important;
    color: #B9C4D1 !important;
}

/* Remove unwanted parent backgrounds */
#mw-content-text > div[style*="background-color:#cccccc"] {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
}
/* Main Page Section Header Style */
.mainpage-header {
    background: #1C2B44 !important;
    color: #E3B44A !important;
    border: 1px solid #E3B44A !important;
    padding: 6px !important;
    text-align: center !important;
    margin-bottom: 6px !important;
}


/* SPELL LIST CONTAINER */
.spell-list {
  border: 1px solid #b7c2c7;
  background: #e7ecef;
  padding: 10px;
  margin-bottom: 20px;
}

/* SPELL LIST TITLE */
.spell-list__title {
  background: #c4d3db;
  padding: 6px;
  text-align: center;
  font-weight: bold;
  border: 1px solid #a9b5bb;
  margin-bottom: 10px;
}

/* COLUMN WRAPPER */
.spell-list__cols {
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

/* EACH COLUMN */
.spell-col {
  flex: 1;
  border: 1px solid #b7c2c7;
  background: #f4f7f8;
  padding: 0;
}

/* EACH SPELL ROW */
.spell-row {
  display: flex;
  border-bottom: 1px solid #d1d9dd;
  padding: 4px 6px;
  align-items: center;
}

/* LEVEL NUMBER */
.spell-lvl {
  width: 28px;
  min-width: 28px;
  text-align: center;
  font-weight: bold;
  color: #333;
}

/* SPELL DATA (icons + name) */
.spell-data {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ICON WRAPPER */
.spell-icon-wrap img {
  vertical-align: middle;
  width: 20px;
  height: 20px;
}

/* Reduce spacing between each spell row */
.spell-row {
    display: flex;
    align-items: center;
    padding: 2px 4px !important;   /* was BIG, now tiny */
    margin: 0 !important;
    border-bottom: 1px solid #0c1621; /* optional thin line */
}

/* Level column ΓÇö tiny spacing, no padding */
.spell-lvl {
    width: 25px;
    text-align: center;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 12px;
}

/* Spell data container ΓÇö remove extra padding */
.spell-data {
    display: flex;
    align-items: center;
    gap: 0px;               /* small spacing between icon + text */
    padding: 0 !important;
    margin: 0 !important;
}

/* Icons closer to text */
.spell-icon-wrap img {
    vertical-align: middle;
    margin: 0;
    padding: 0;
}

/* Columns ΓÇö remove giant default spacing */
.spell-list__cols {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0 !important;          /* remove spacing between columns */
}

/* Columns interior */
.spell-col {
    padding: 0 !important;
    margin: 0 !important;
}

/* Make each spell row shorter */
.spell-row {
  display: flex;
  align-items: center;
  padding: 2px 4px !important;   /* Γåô smaller padding */
  min-height: 14px !important;   /* Γåô controls total row height */
  line-height: 14px !important;
}

/* Shrinks the level number box */
.spell-lvl {
  padding: 0 4px !important;
  font-size: 12px !important;
}

/* Make the name + icons sit close with no big gaps */
.spell-data {
  display: flex;
  align-items: center;
  gap: 4px !important;
}

/* Icon spacing tightened */
.spell-icon-wrap img {
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
}

/* Override big cells from the column container */
.spell-col > div {
  padding: 2px 4px !important;
  margin: 0 !important;
}

/* Remove vertical stretching */
.spell-col {
  display: flex;
  flex-direction: column;
  gap: 2px !important;
}
/** FORCE-COLLAPSE SPELL LIST SPACING ΓÇö ONLY FOR THESE TEMPLATES **/

/* Remove extra vertical gaps between rows */
.spell-col {
    display: flex;
    flex-direction: column;
    gap: 0 !important;         /* was creating big spacing */
    padding: 0 !important;
    margin: 0 !important;
}

/* Tightest possible row height */
.spell-row {
    display: flex;
    align-items: center;
    padding: 1px 3px !important;    /* Γåô tighten padding */
    margin: 0 !important;
    border-bottom: 1px solid #d1d9dd;
    min-height: 0 !important;
    line-height: 14px !important;
}

/* Remove MediaWiki auto-margins inside spell-col */
.spell-col > * {
    margin: 0 !important;
    padding: 0 !important;
}

/* Remove top + bottom whitespace template expansion inserts */
.spell-col > :first-child,
.spell-col > :last-child {
    margin: 0 !important;
    padding: 0 !important;
}

/* Shrink icons + spacing */
.spell-icon-wrap img {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
}

/* Spell data spacing */
.spell-data {
    display: flex;
    align-items: center;
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Level number cell shrink */
.spell-lvl {
    width: 24px;
    min-width: 24px;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 14px !important;
}

/* --- FORCE SPELL ROWS TO BE SMALL & TIGHT --- */
.spell-row {
  display: flex !important;
  align-items: center !important;
  padding: 1px 3px !important;
  margin: 0 !important;
  min-height: 16px !important;
  line-height: 16px !important;
  height: 16px !important;
  border-bottom: 1px solid #c9cfd3 !important;
}

/* --- LEVEL NUMBER BOX TIGHTENED --- */
.spell-lvl {
  width: 22px !important;
  min-width: 22px !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 16px !important;
}

/* --- SPELL NAME & ICON AREA --- */
.spell-data {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 16px !important;
}

/* --- ICONS REDUCED LIKE YOUR EXAMPLE IMAGE --- */
.spell-icon-wrap img {
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* --- REMOVE GAPS BETWEEN ROWS --- */
.spell-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.spell-col > div {
  margin: 0 !important;
  padding: 0 !important;
}

/* --- MAKE COLUMNS SKINNY LIKE THE IMAGE --- */
.spell-list__cols {
  gap: 6px !important;
}

.spell-col {
  border: 1px solid #c1c7cc !important;
  background: #f8fafb !important;
}



/* Remove all white background inside spell columns */
.spell-col * {
  background: transparent !important;
  box-shadow: none !important;
}

/* Also clear tables if the template is outputting them internally */
.spell-col table,
.spell-col tr,
.spell-col td {
  background: transparent !important;
  border: none !important;
}

/* Prevent wiki default gray/white cell styling */
.spell-row,
.spell-row * {
  background: transparent !important;
}




/* Remove borders from any images inside spell list */
.spell-list img,
.spell-row img,
.spell-icon-wrap img {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* MediaWiki sometimes wraps images in <a> tags ΓÇö strip borders there too */
.spell-list a img,
.spell-row a img {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
Retrieved from "https://wiki.eqoa.live/index.php?title=MediaWiki:Common.css&oldid=226"