MediaWiki:Common.css: Difference between revisions

From EQOA Sandstorm Wiki
Jump to navigationJump to search
No edit summary
No edit summary
Line 1: Line 1:
/* ==========================================================================
/* ============================================================
   EQOA - Option A Theme
   EQOA: Sandstorm WIKI THEME ΓÇö OPTION D (Classic EQ UI Palette)
   Palette variables for easy maintenance
   Applies to ALL pages, ALL namespaces, ALL skins (MonoBook primary)
   ========================================================================== */
   ============================================================ */
:root{
  --midnight: #1A1F2B;  /* primary frame / headers */
  --gold:    #D4A441;  /* highlights, accents */
  --sand:    #C7B89B;  /* infobox / card bg */
  --sky:      #6C8BAE;  /* link color / subtle accents */
  --evergreen: #3A5C46;  /* success / positive */
  --ember:    #A03B2C;  /* warnings / danger */
  --light:    #EDEDED;  /* general content text on dark bg */
  --neutral-dark: #3E3E3E; /* UI neutrals where needed */
}


/* ==========================================================================
:root {
  GLOBAL PAGE BACKGROUND & BASE TEXT
  /* BASE */
  ========================================================================== */
   --midnight: #0F1626;     /* Deep EQ-style indigo */
html, body {
   --sand: #B9C4D1;         /* Soft blue-gray parchment */
   background-color: var(--midnight) !important;
  color: var(--light) !important;
  font-family: "Segoe UI", Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-image: none !important;
}


/* Layout containers to use the frame color (keeps consistent) */
  /* ACCENTS */
#mw-page-base,
  --gold: #E3B44A;          /* Classic EverQuest gold */
#mw-head-base,
  --sky: #6DA5E7;          /* EQ link blue */
#mw-head,
#mw-panel,
#content,
#footer,


#mw-footer,
  /* STATUS COLORS */
#mw-wrapper,
  --evergreen: #3E6B52;    /* success */
#mw-data-before-content,
   --ember: #9A2E1E;         /* danger */
#mw-data-after-content {
   background-color: transparent !important;
  border: none !important;
}


/* Ensure body content area uses readable parchment-like cards */
  /* BOX HEADER ACCENT */
#content, #mw-content-text, .mw-body {
  --box-header: #1C2B44;    /* EQ-style header blue */
  color: var(--light) !important;
}
}


/* ==========================================================================
/* ============================================================
   LOGO AREA
   GLOBAL PAGE BACKGROUND & TEXT
   ========================================================================== */
   ============================================================ */
#p-logo {
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  height: auto !important;
  position: relative;
  overflow: visible !important;
}


#p-logo a {
body {
  display: block;
   background: var(--midnight) !important;
   background: url("/eqoawiki/resources/assets/sandstorm_logo1.png") no-repeat center center !important;
   color: var(--sand) !important;
  background-size: contain !important;
   font-family: "Georgia", "Times New Roman", serif;
   width: 135px !important;
   height: 155px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-indent: -9999px;
  overflow: hidden;
  border: none !important;
}
}
#p-logo img, #p-logo a img { display:none !important; }


/* ==========================================================================
#content,
  TOP NAV / SIDEBAR
#bodyContent,
  ========================================================================== */
#mw-content-text {
/* Head bar: subtle midnight frame */
   color: var(--sand) !important;
#mw-head, #p-personal, #p-views, #right-navigation, #left-navigation {
   background-color: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}
}


/* Top nav links */
/* ============================================================
#p-personal a, #p-views a, #right-navigation a, #left-navigation a,
  HEADINGS (GLOBAL OVERRIDES)
#p-personal .mw-portlet-body, #p-views .mw-portlet-body {
  ============================================================ */
  color: var(--light) !important;
  font-weight: 600;
}


#p-personal a:hover, #p-views a:hover,
h1, h2, h3, h4, h5, h6,
#right-navigation a:hover, #left-navigation a:hover,
#firstHeading, .mw-first-heading,
#p-personal li.active a, #p-views li.selected a {
.mw-body h1, .mw-body h2, .mw-body h3,
.mw-body h4, .mw-body h5, .mw-body h6 {
   color: var(--gold) !important;
   color: var(--gold) !important;
   text-decoration: underline;
   font-family: "Georgia", "Times New Roman", serif !important;
  font-weight: 700 !important;
  border: none !important;
}
}


/* Sidebar panel headings */
/* Section header underline */
#mw-panel .portal .portal-title {
.mw-parser-output > h2 {
  font-size: 1.05em;
   border-bottom: 1px solid rgba(255,255,255,0.15) !important;
  font-weight: 700;
  padding: 6px 8px;
  color: var(--gold);
   border-bottom: 1px solid rgba(255,255,255,0.06);
  background: transparent !important;
}
}


/* Sidebar links neutral */
/* ============================================================
#mw-panel .portal a {
  LINKS
  color: var(--light) !important;
  ============================================================ */
}
#mw-panel a:hover { color: var(--gold) !important; }


/* ==========================================================================
a {
  BASE CONTENT STYLING (NS-1 content area preserved)
   color: var(--sky) !important;
  ========================================================================== */
.ns--1 #content {
  font-size: 16px;
  font-family: "Segoe UI", Arial, sans-serif;
   color: var(--light);
  background-color: transparent;
}
}


/* Content header left as themed gold stripe */
a:visited {
.ns--1 #content .content-header {
   color: #5E8BC0 !important;
   color: inherit;
  background-color: transparent;
}
}


/* Links ΓÇö primary: sky, highlight on hover: gold */
.ns--1 #content a,
a,
a:link,
a:visited {
  color: var(--sky) !important;
  font-weight: 600;
  text-decoration: none;
}
.ns--1 #content a:hover,
a:hover {
a:hover {
   color: var(--gold) !important;
   color: var(--gold) !important;
  text-decoration: underline;
}
}


/* External links get same treatment */
/* ============================================================
.ns--1 #content a.external { color: var(--sky) !important; }
  TABLES, ROWS, LISTS
.ns--1 #content a.external:hover { color: var(--gold) !important; }
  ============================================================ */


/* Headings */
table,
.ns--1 #content > :not(.content-header) h1,
.wikitable {
.ns--1 #content > :not(.content-header) h2,
   background: #0A1420 !important;
.ns--1 #content > :not(.content-header) h3,
   border: 1px solid var(--gold) !important;
.ns--1 #content > :not(.content-header) h4,
.ns--1 #content > :not(.content-header) h5,
.ns--1 #content > :not(.content-header) h6 {
   font-family: "Georgia", "Times New Roman", serif;
   color: var(--gold);
  font-weight: 700;
  margin: 0 0 8px 0;
}
}


/* Subheadings / section titles (darker strip) */
.wikitable th {
.section-title, .right-header, .infobox-title {
   background: var(--box-header) !important;
   background: linear-gradient(90deg, rgba(0,0,0,0.15), rgba(0,0,0,0.05));
   color: var(--gold) !important;
   color: var(--gold) !important;
}
}


/* ==========================================================================
.wikitable td {
  QUEST BOXES, PANELS, INFOBOXES (Soft Sandstone cards)
   color: var(--sand) !important;
  ========================================================================== */
   border-color: var(--gold) !important;
.quest-right,
.quest-reward,
.quest-walkthrough,
.zone-desc-box,
.npc-bottombox,
.eqoa-detail-table,
.npc-legend-table,
.spell-list,
.mw-parser-output .npc-bottombox {
   background-color: var(--sand) !important;
   color: var(--midnight) !important;
  border: 2px solid rgba(0,0,0,0.5) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.25) inset;
}
}


/* Quest headers restore to gold title bar */
/* Alternating row accent */
.quest-header,
tr:nth-child(even) {
 
   background: #121E30 !important;
.zone-desc-header,
.right-header,
.spell-list__title,
.infobox-title {
  background-color: var(--midnight) !important;
  color: var(--gold) !important;
   padding: 6px 10px !important;
  border-radius: 3px;
}
}


/* Kill inner white boxes from skins to preserve the sandstone card */
/* ============================================================
.quest-right * ,
  CUSTOM BOXES / PORTALS / HOMEPAGE SECTIONS
.quest-reward * ,
  ============================================================ */
.quest-walkthrough * ,
.zone-desc-box * ,
.npc-bottombox * {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
}


/* Small utility for content inside cards */
.portal,
.quest-right .content, .quest-reward .content, .npc-bottombox .content {
.navbox,
   color: var(--midnight) !important;
.multicol,
   padding: 6px !important;
.mainpage-box,
   margin: 0 !important;
.mainpage-header,
  font-size: 14px;
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 */
  NPC LEGEND TABLE (gold card with dark text)
.portal .portal-header,
  ========================================================================== */
.mainpage-header,
.npc-legend-table {
div.center-box .header,
  background-color: var(--gold) !important;
h2.box-header,
  color: var(--midnight) !important;
.box-header {
  border: 2px solid #000 !important;
   background: var(--box-header) !important;
  border-collapse: collapse !important;
   padding: 6px 10px !important;
  border-spacing: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.npc-legend-table td, .npc-legend-table th {
  background: transparent !important;
  color: var(--midnight) !important;
  padding: 6px !important;
  border: none !important;
}
 
/* Legend content block */
.npc-legend-table .npc-legend-content {
 
   background: var(--gold) !important;
  color: var(--midnight) !important;
   padding: 6px !important;
}
 
/* ==========================================================================
  SPELL LIST / SPELL ROWS (compact Horizon style preserved)
  ========================================================================== */
.spell-list {
  background-color: transparent;
  border: 2px solid rgba(0,0,0,0.45);
  margin: 0;
  padding: 6px;
  box-sizing: border-box;
  font-family: "Courier New", monospace;
  color: var(--midnight);
}
 
/* Title */
.spell-list__title {
  background-color: var(--midnight) !important;
   color: var(--gold) !important;
   color: var(--gold) !important;
  font-size: 1.25em !important;
   text-align: center;
   text-align: center;
  margin: 0;
   border-bottom: 1px solid var(--gold) !important;
  padding: 6px 8px;
   border-bottom: 2px solid rgba(0,0,0,0.4);
  font-weight: 700;
  font-size: 14px;
}
}


/* Columns wrapper */
/* ============================================================
.spell-list__cols { display:flex; gap:6px; padding:6px; }
  SIDEBAR (MonoBook)
  ============================================================ */


/* Column */
#p-logo {
.spell-col {
  flex: 1;
  min-width: 200px;
  border: 1px solid rgba(0,0,0,0.35);
  padding: 4px;
  box-sizing: border-box;
  background: transparent;
}
 
/* Individual row */
.spell-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px;
  padding: 4px 6px !important;
  border-bottom: 1px solid rgba(0,0,0,0.35) !important;
  line-height: 1 !important;
  min-height: 24px !important;
   background: transparent !important;
   background: transparent !important;
  color: var(--midnight) !important;
}
}


/* Level box */
#p-navigation,
.spell-lvl {
#p-interaction,
  width: 32px !important;
#p-tb,
  min-width: 32px;
#p-search {
   text-align: center !important;
   background: #0A1420 !important;
   border-right: 1px solid rgba(0,0,0,0.45) !important;
   border: 1px solid var(--gold) !important;
  padding: 2px 6px !important;
   color: var(--sand) !important;
  font-weight: 700;
  background: transparent !important;
   color: var(--midnight) !important;
  font-size: 12px !important;
}
}


/* Icon + name */
#p-navigation h3,
.spell-data { display:flex !important; align-items:center !important; gap:6px !important; width:100%; }
#p-interaction h3,
.spell-icon { width:20px !important; height:20px !important; display:inline-block !important; background-size:cover; }
#p-tb h3,
.spell-name { padding:0 !important; margin:0 !important; font-size:13px; color:var(--midnight) !important; }
#p-search h3 {
 
   background: var(--box-header) !important;
/* Make sure nothing inside rows forces white backgrounds */
   color: var(--gold) !important;
.spell-row * { background: transparent !important; border: none !important; box-shadow:none !important; }
   padding: 4px 6px !important;
 
/* ==========================================================================
  TABLES, WIKITABLES, AND GENERIC CARDS
  ========================================================================== */
table.wikitable, .infobox, .infobox2 {
   background: var(--sand) !important;
   color: var(--midnight) !important;
  border: 2px solid rgba(0,0,0,0.5) !important;
  border-collapse: collapse !important;
}
 
table.wikitable th, table.wikitable td {
   padding: 6px !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
}
}


/* Alternate row shading for readability */
/* ============================================================
table.wikitable tr:nth-child(even) { background: rgba(0,0,0,0.02) !important; }
  INPUTS / SEARCH BOX
  ============================================================ */


/* ==========================================================================
input,
  ZONE DESCRIPTION BOX (purple -> use midnight + sand)
textarea {
  ========================================================================== */
   background: #142233 !important;
.zone-desc-box {
   color: var(--sand) !important;
   background: var(--sand) !important;
   border: 1px solid var(--gold) !important;
  border: 2px solid rgba(0,0,0,0.5) !important;
  padding: 6px !important;
   color: var(--midnight) !important;
}
.zone-desc-header {
   background: var(--midnight) !important;
  color: var(--gold) !important;
  padding: 6px !important;
}
}


/* Clear paragraph wrappers that create white boxes */
/* ============================================================
.zone-desc-box > p, .zone-desc-header > p, .zone-description p, .zone-description blockquote {
  NOTICES / TEMPLATES
  margin:0 !important;
  ============================================================ */
  padding:0 !important;
  background:transparent !important;
  border:none !important;
  color: inherit !important;
}


/* ==========================================================================
.success,
  NPC BOTTOM BOX (kept sandstone with dark border)
.notice-success {
  ========================================================================== */
   background: var(--evergreen) !important;
.mw-parser-output .npc-bottombox {
   color: #DFF2E4 !important;
   background-color: var(--sand) !important;
  border: 2px solid rgba(0,0,0,0.6) !important;
  padding: 6px !important;
  margin-top: 12px !important;
   color: var(--midnight) !important;
}
}


/* Force internal elements transparent to keep card look */
.warning,
.mw-parser-output .npc-bottombox * {
.notice-warning {
   background: transparent !important;
   background: #3F2E00 !important;
   background-color: transparent !important;
   color: #FFDD8A !important;
  box-shadow: none !important;
  border: none !important;
}
}


/* ==========================================================================
.error,
  GLOBAL LINKS (fallbacks)
.notice-error {
  ========================================================================== */
   background: var(--ember) !important;
a, a:visited, a:active {
   color: #F9D0C8 !important;
   color: var(--sky) !important;
   font-weight: 600;
  text-decoration: none;
}
}
a:hover { color: var(--gold) !important; text-decoration: underline; }
/* ==========================================================================
  ALERTS / STATUS COLORS
  ========================================================================== */
.alert-success { color: var(--evergreen) !important; }
.alert-danger  { color: var(--ember) !important; }
.badge-gold { background: var(--gold); color: var(--midnight); padding: 2px 6px; border-radius: 3px; }
/* ==========================================================================
  MISC: small tweaks from original file to preserve layout and behavior
  ========================================================================== */
/* Remove white separators from head base */
#mw-head-base { border-bottom: none !important; }
/* Panel content moved down to avoid overlapping logo (adjust if needed) */
#mw-panel { padding-top: 170px !important; }
/* Ensure no invisible overlays block logo */
#p-logo { margin-top: 0 !important; padding-top: 0 !important; position: absolute !important; top: 0 !important; }


/* Keep sidebar links readable */
/* ============================================================
#mw-panel .portal .body ul li a { color: var(--light) !important; }
  FOOTER
#mw-panel .portal .body ul li a:hover { color: var(--gold) !important; }
  ============================================================ */


/* Small responsive fix: reduce spell-list min width on narrow screens */
#footer {
@media (max-width: 820px) {
   background: #0A1420 !important;
   .spell-list__cols { flex-direction: column; }
   color: var(--sand) !important;
   .spell-col { min-width: auto; }
   border-top: 1px solid var(--gold) !important;
   #mw-panel { padding-top: 120px !important; }
}
}


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

Revision as of 02:48, 19 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
   ============================================================ */
Retrieved from "https://wiki.eqoa.live/index.php?title=MediaWiki:Common.css&oldid=178"