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
   EVERQUEST ONLINE ADVENTURERS ΓÇö WIKI THEME (PALETTE A)
   Palette variables for easy maintenance
  Forest / Teal / Gold
   ========================================================================== */
   Applies to ALL skins, including MonoBook
: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 */
}


/* ==========================================================================
/* ---------- PALETTE VARIABLES ---------- */
  GLOBAL PAGE BACKGROUND & BASE TEXT
:root {
  ========================================================================== */
   --eqoa-bg: #0F2733;
html, body {
   --eqoa-bg-light: #183A45;
   background-color: var(--midnight) !important;
   --eqoa-accent: #2A5F63;
   color: var(--light) !important;
   --eqoa-highlight: #C48F33;
   font-family: "Segoe UI", Arial, sans-serif;
   --eqoa-text: #E4E7E7;
   -webkit-font-smoothing: antialiased;
   --eqoa-muted: #A5B1A8;
   -moz-osx-font-smoothing: grayscale;
   background-image: none !important;
}
}


/* Layout containers to use the frame color (keeps consistent) */
/* ============================================================
#mw-page-base,
  GLOBAL PAGE BACKGROUND & TEXT
#mw-head-base,
  ============================================================ */
#mw-head,
body,
#mw-panel,
#content,
#content,
#footer,
body.skin-monobook {
#mw-footer,
   background: var(--eqoa-bg) !important;
#mw-wrapper,
   color: var(--eqoa-text) !important;
#mw-data-before-content,
#mw-data-after-content {
   background-color: transparent !important;
  border: none !important;
}
 
/* Ensure body content area uses readable parchment-like cards */
#content, #mw-content-text, .mw-body {
   color: var(--light) !important;
}
}


/* ==========================================================================
/* Remove harsh white backgrounds from random components */
  LOGO AREA
#content * {
  ========================================================================== */
#p-logo {
   background: transparent !important;
   background: transparent !important;
  margin: 0 !important;
   border-color: var(--eqoa-accent) !important;
  padding: 0 !important;
   border: none !important;
  height: auto !important;
  position: relative;
  overflow: visible !important;
}
}


#p-logo a {
/* ============================================================
  display: block;
  HEADINGS ΓÇö TARGET *ALL* H1ΓÇôH6
  background: url("/eqoawiki/resources/assets/sandstorm_logo1.png") no-repeat center center !important;
  ============================================================ */
  background-size: contain !important;
h1, h2, h3, h4, h5, h6,
  width: 135px !important;
#content h1, #content h2, #content h3, #content h4, #content h5, #content h6,
  height: 155px !important;
.firstHeading {
   margin: 0 auto !important;
   color: var(--eqoa-highlight) !important;
   padding: 0 !important;
   border-bottom: 1px solid var(--eqoa-accent) !important;
   text-indent: -9999px;
   font-family: "Georgia", "Times New Roman", serif !important;
  overflow: hidden;
  border: none !important;
}
}
#p-logo img, #p-logo a img { display:none !important; }


/* ==========================================================================
/* First heading (page title) */
  TOP NAV / SIDEBAR
.firstHeading {
  ========================================================================== */
   padding-bottom: 5px;
/* Head bar: subtle midnight frame */
   font-size: 1.9em !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,
  LINKS (All skins)
#p-personal .mw-portlet-body, #p-views .mw-portlet-body {
  ============================================================ */
  color: var(--light) !important;
a,
  font-weight: 600;
#content a,
}
.mw-body a {
 
   color: var(--eqoa-highlight) !important;
#p-personal a:hover, #p-views a:hover,
#right-navigation a:hover, #left-navigation a:hover,
#p-personal li.active a, #p-views li.selected a {
   color: var(--gold) !important;
  text-decoration: underline;
}
 
/* Sidebar panel headings */
#mw-panel .portal .portal-title {
  font-size: 1.05em;
  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 {
  color: var(--light) !important;
}
#mw-panel a:hover { color: var(--gold) !important; }
/* ==========================================================================
  BASE CONTENT STYLING (NS-1 content area preserved)
  ========================================================================== */
.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 */
.ns--1 #content .content-header {
  color: inherit;
  background-color: transparent;
}
/* Links ΓÇö primary: sky, highlight on hover: gold */
.ns--1 #content a,
a,
a:link,
a:visited {
a:visited {
   color: var(--sky) !important;
   color: #b57d2b !important;
  font-weight: 600;
  text-decoration: none;
}
.ns--1 #content a:hover,
a:hover {
  color: var(--gold) !important;
  text-decoration: underline;
}
}


/* External links get same treatment */
a:hover,
.ns--1 #content a.external { color: var(--sky) !important; }
a:active {
.ns--1 #content a.external:hover { color: var(--gold) !important; }
   color: #e5b561 !important;
 
/* Headings */
.ns--1 #content > :not(.content-header) h1,
.ns--1 #content > :not(.content-header) h2,
.ns--1 #content > :not(.content-header) h3,
.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) */
/* ============================================================
.section-title, .right-header, .infobox-title {
  SIDEBAR / LEFT MENU (MonoBook compatible)
   background: linear-gradient(90deg, rgba(0,0,0,0.15), rgba(0,0,0,0.05));
  ============================================================ */
   color: var(--gold) !important;
#sidebar,
#mw-panel,
#column-one {
   background: var(--eqoa-bg-light) !important;
   border-right: 2px solid var(--eqoa-accent) !important;
}
}


/* ==========================================================================
#p-navigation li a,
  QUEST BOXES, PANELS, INFOBOXES (Soft Sandstone cards)
#p-tb a,
  ========================================================================== */
#p-cactions a,
.quest-right,
#mw-panel a,
.quest-reward,
#column-one a {
.quest-walkthrough,
   color: var(--eqoa-highlight) !important;
.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 */
/* ============================================================
.quest-header,
  CONTENT BOXES, INFOBOXES, PORTALS
.zone-desc-header,
  ============================================================ */
.right-header,
.infobox,
.spell-list__title,
table.infobox,
.infobox-title {
.portal,
   background-color: var(--midnight) !important;
.toc,
   color: var(--gold) !important;
.mw-message-box,
   padding: 6px 10px !important;
.mw-warning,
  border-radius: 3px;
.mw-notification {
   background: var(--eqoa-bg-light) !important;
   border: 1px solid var(--eqoa-accent) !important;
   color: var(--eqoa-text) !important;
}
}


/* Kill inner white boxes from skins to preserve the sandstone card */
/* TOC Headers */
.quest-right * ,
.toc .toctitle,
.quest-reward * ,
.portal h3 {
.quest-walkthrough * ,
   color: var(--eqoa-highlight) !important;
.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 */
/* ============================================================
.quest-right .content, .quest-reward .content, .npc-bottombox .content {
  TABLES
   color: var(--midnight) !important;
  ============================================================ */
   padding: 6px !important;
table,
   margin: 0 !important;
.wikitable {
  font-size: 14px;
   background: var(--eqoa-bg-light) !important;
   color: var(--eqoa-text) !important;
   border: 1px solid var(--eqoa-accent) !important;
}
}


/* ==========================================================================
.wikitable th {
  NPC LEGEND TABLE (gold card with dark text)
   background: var(--eqoa-accent) !important;
  ========================================================================== */
   color: var(--eqoa-text) !important;
.npc-legend-table {
   background-color: var(--gold) !important;
   color: var(--midnight) !important;
  border: 2px solid #000 !important;
  border-collapse: collapse !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 */
.wikitable tr:nth-child(even) {
.npc-legend-table .npc-legend-content {
   background: rgba(255,255,255,0.05) !important;
   background: var(--gold) !important;
  color: var(--midnight) !important;
  padding: 6px !important;
}
}


/* ==========================================================================
/* ============================================================
   SPELL LIST / SPELL ROWS (compact Horizon style preserved)
   NAVBOXES / FOOTERS / TEMPLATE BOXES
   ========================================================================== */
   ============================================================ */
.spell-list {
.navbox,
   background-color: transparent;
.navbox-subgroup,
  border: 2px solid rgba(0,0,0,0.45);
.navbox-title,
   margin: 0;
.navbox-group {
  padding: 6px;
   background: var(--eqoa-bg-light) !important;
  box-sizing: border-box;
   color: var(--eqoa-text) !important;
   font-family: "Courier New", monospace;
   border-color: var(--eqoa-accent) !important;
  color: var(--midnight);
}
}


/* Title */
/* ============================================================
.spell-list__title {
  SEARCH BOX
   background-color: var(--midnight) !important;
  ============================================================ */
   color: var(--gold) !important;
#searchInput {
  text-align: center;
   background: var(--eqoa-bg-light) !important;
  margin: 0;
   color: var(--eqoa-text) !important;
  padding: 6px 8px;
   border: 1px solid var(--eqoa-accent) !important;
   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; }
  BUTTONS (edit, history, tabs)
  ============================================================ */


/* Column */
#p-cactions li a,
.spell-col {
#ca-edit a,
   flex: 1;
#ca-history a,
  min-width: 200px;
#ca-talk a,
   border: 1px solid rgba(0,0,0,0.35);
#ca-view a,
   padding: 4px;
#ca-nstab-main a {
  box-sizing: border-box;
   background: var(--eqoa-bg-light) !important;
  background: transparent;
   border: 1px solid var(--eqoa-accent) !important;
   color: var(--eqoa-highlight) !important;
}
}


/* Individual row */
#p-cactions li.selected a,
.spell-row {
#ca-edit a:hover,
  display: flex !important;
#ca-history a:hover {
  align-items: center !important;
   background: var(--eqoa-accent) !important;
   gap: 6px;
   color: #fff !important;
  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;
   color: var(--midnight) !important;
}
}


/* Level box */
/* ============================================================
.spell-lvl {
   FOOTER
  width: 32px !important;
   ============================================================ */
  min-width: 32px;
#footer,
  text-align: center !important;
#footer * {
  border-right: 1px solid rgba(0,0,0,0.45) !important;
   background: var(--eqoa-bg) !important;
  padding: 2px 6px !important;
   color: var(--eqoa-muted) !important;
  font-weight: 700;
  background: transparent !important;
  color: var(--midnight) !important;
  font-size: 12px !important;
}
 
/* Icon + name */
.spell-data { display:flex !important; align-items:center !important; gap:6px !important; width:100%; }
.spell-icon { width:20px !important; height:20px !important; display:inline-block !important; background-size:cover; }
.spell-name { padding:0 !important; margin:0 !important; font-size:13px; color:var(--midnight) !important; }
 
/* Make sure nothing inside rows forces white backgrounds */
.spell-row * { background: transparent !important; border: none !important; box-shadow:none !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; }
 
/* ==========================================================================
  ZONE DESCRIPTION BOX (purple -> use midnight + sand)
  ========================================================================== */
.zone-desc-box {
   background: var(--sand) !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 {
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:none !important;
  color: inherit !important;
}
 
/* ==========================================================================
  NPC BOTTOM BOX (kept sandstone with dark border)
  ========================================================================== */
.mw-parser-output .npc-bottombox {
  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 */
.mw-parser-output .npc-bottombox * {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
   border: none !important;
   border: none !important;
}
}
/* ==========================================================================
  GLOBAL LINKS (fallbacks)
  ========================================================================== */
a, a:visited, a:active {
  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; }
#mw-panel .portal .body ul li a:hover { color: var(--gold) !important; }
/* Small responsive fix: reduce spell-list min width on narrow screens */
@media (max-width: 820px) {
  .spell-list__cols { flex-direction: column; }
  .spell-col { min-width: auto; }
  #mw-panel { padding-top: 120px !important; }
}
/* ==========================================================================
  END OF THEME
  ========================================================================== */


/* ============================================================
/* ============================================================
   MONOBOOKΓÇôSPECIFIC GLOBAL HEADER COLOR & FONT
   MISC ELEMENTS
  Forces the EQOA theme across ALL pages, templates, namespaces
   ============================================================ */
   ============================================================ */


/* Page title */
/* Blockquotes */
#firstHeading, #content h1.firstHeading {
blockquote {
  color: var(--gold) !important;
   border-left: 3px solid var(--eqoa-highlight) !important;
  font-family: "Georgia", "Times New Roman", serif !important;
   background: rgba(196, 143, 51, 0.1) !important;
  font-weight: 700 !important;
   color: var(--eqoa-text) !important;
   border: none !important;
}
 
/* Standard headings (inside articles, templates, etc.) */
#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6,
.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 headers Monobook draws with extra padding/underline */
#content h2,
.mw-body h2,
.mw-heading,
#bodyContent h2 {
  border-bottom: 1px solid rgba(255,255,255,0.2) !important;
  padding-bottom: 2px !important;
}
 
/* Headings inside table captions or infobox blocks */
table caption,
.infobox caption,
.infobox-header,
.mw-parser-output table th h3,
.mw-parser-output table th h2 {
   color: var(--gold) !important;
  font-family: "Georgia", "Times New Roman", serif !important;
  font-weight: 700 !important;
}
}


/* Any element Monobook forces to black */
/* Code snippets */
#bodyContent h1,
pre,
#bodyContent h2,
code {
#bodyContent h3,
  background: #10262d !important;
#bodyContent h4,
  border: 1px solid var(--eqoa-accent) !important;
#bodyContent h5,
   color: var(--eqoa-highlight) !important;
#bodyContent h6,
#mw-content-text h1,
#mw-content-text h2,
#mw-content-text h3,
#mw-content-text h4,
#mw-content-text h5,
#mw-content-text h6 {
   color: var(--gold) !important;
}
}

Revision as of 09:40, 18 November 2025

/* ============================================================
   EVERQUEST ONLINE ADVENTURERS ΓÇö WIKI THEME (PALETTE A)
   Forest / Teal / Gold
   Applies to ALL skins, including MonoBook
   ============================================================ */

/* ---------- PALETTE VARIABLES ---------- */
:root {
  --eqoa-bg: #0F2733;
  --eqoa-bg-light: #183A45;
  --eqoa-accent: #2A5F63;
  --eqoa-highlight: #C48F33;
  --eqoa-text: #E4E7E7;
  --eqoa-muted: #A5B1A8;
}

/* ============================================================
   GLOBAL PAGE BACKGROUND & TEXT
   ============================================================ */
body,
#content,
body.skin-monobook {
  background: var(--eqoa-bg) !important;
  color: var(--eqoa-text) !important;
}

/* Remove harsh white backgrounds from random components */
#content * {
  background: transparent !important;
  border-color: var(--eqoa-accent) !important;
}

/* ============================================================
   HEADINGS ΓÇö TARGET *ALL* H1ΓÇôH6
   ============================================================ */
h1, h2, h3, h4, h5, h6,
#content h1, #content h2, #content h3, #content h4, #content h5, #content h6,
.firstHeading {
  color: var(--eqoa-highlight) !important;
  border-bottom: 1px solid var(--eqoa-accent) !important;
  font-family: "Georgia", "Times New Roman", serif !important;
}

/* First heading (page title) */
.firstHeading {
  padding-bottom: 5px;
  font-size: 1.9em !important;
}

/* ============================================================
   LINKS (All skins)
   ============================================================ */
a,
#content a,
.mw-body a {
  color: var(--eqoa-highlight) !important;
}

a:visited {
  color: #b57d2b !important;
}

a:hover,
a:active {
  color: #e5b561 !important;
}

/* ============================================================
   SIDEBAR / LEFT MENU (MonoBook compatible)
   ============================================================ */
#sidebar,
#mw-panel,
#column-one {
  background: var(--eqoa-bg-light) !important;
  border-right: 2px solid var(--eqoa-accent) !important;
}

#p-navigation li a,
#p-tb a,
#p-cactions a,
#mw-panel a,
#column-one a {
  color: var(--eqoa-highlight) !important;
}

/* ============================================================
   CONTENT BOXES, INFOBOXES, PORTALS
   ============================================================ */
.infobox,
table.infobox,
.portal,
.toc,
.mw-message-box,
.mw-warning,
.mw-notification {
  background: var(--eqoa-bg-light) !important;
  border: 1px solid var(--eqoa-accent) !important;
  color: var(--eqoa-text) !important;
}

/* TOC Headers */
.toc .toctitle,
.portal h3 {
  color: var(--eqoa-highlight) !important;
}

/* ============================================================
   TABLES
   ============================================================ */
table,
.wikitable {
  background: var(--eqoa-bg-light) !important;
  color: var(--eqoa-text) !important;
  border: 1px solid var(--eqoa-accent) !important;
}

.wikitable th {
  background: var(--eqoa-accent) !important;
  color: var(--eqoa-text) !important;
}

.wikitable tr:nth-child(even) {
  background: rgba(255,255,255,0.05) !important;
}

/* ============================================================
   NAVBOXES / FOOTERS / TEMPLATE BOXES
   ============================================================ */
.navbox,
.navbox-subgroup,
.navbox-title,
.navbox-group {
  background: var(--eqoa-bg-light) !important;
  color: var(--eqoa-text) !important;
  border-color: var(--eqoa-accent) !important;
}

/* ============================================================
   SEARCH BOX
   ============================================================ */
#searchInput {
  background: var(--eqoa-bg-light) !important;
  color: var(--eqoa-text) !important;
  border: 1px solid var(--eqoa-accent) !important;
}

/* ============================================================
   BUTTONS (edit, history, tabs)
   ============================================================ */

#p-cactions li a,
#ca-edit a,
#ca-history a,
#ca-talk a,
#ca-view a,
#ca-nstab-main a {
  background: var(--eqoa-bg-light) !important;
  border: 1px solid var(--eqoa-accent) !important;
  color: var(--eqoa-highlight) !important;
}

#p-cactions li.selected a,
#ca-edit a:hover,
#ca-history a:hover {
  background: var(--eqoa-accent) !important;
  color: #fff !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
#footer,
#footer * {
  background: var(--eqoa-bg) !important;
  color: var(--eqoa-muted) !important;
  border: none !important;
}

/* ============================================================
   MISC ELEMENTS
   ============================================================ */

/* Blockquotes */
blockquote {
  border-left: 3px solid var(--eqoa-highlight) !important;
  background: rgba(196, 143, 51, 0.1) !important;
  color: var(--eqoa-text) !important;
}

/* Code snippets */
pre,
code {
  background: #10262d !important;
  border: 1px solid var(--eqoa-accent) !important;
  color: var(--eqoa-highlight) !important;
}
Retrieved from "https://wiki.eqoa.live/index.php?title=MediaWiki:Common.css&oldid=174"