MediaWiki:Common.css: Difference between revisions

Revision as of 23:40, 18 November 2025

/* ==========================================================================
   EQOA - Option A Theme
   Palette variables for easy maintenance
   ========================================================================== */
: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 */
}

/* ==========================================================================
   GLOBAL PAGE BACKGROUND & BASE TEXT
   ========================================================================== */
html, body {
  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) */
#mw-page-base,
#mw-head-base,
#mw-head,
#mw-panel,
#content,
#footer,

#mw-footer,
#mw-wrapper,
#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;
}

/* ==========================================================================
   LOGO AREA
   ========================================================================== */
#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 {
  display: block;
  background: url("/eqoawiki/resources/assets/sandstorm_logo1.png") no-repeat center center !important;
  background-size: contain !important;
  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; }

/* ==========================================================================
   TOP NAV / SIDEBAR
   ========================================================================== */
/* Head bar: subtle midnight frame */
#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,
#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,
#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 {
  color: var(--sky) !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 */
.ns--1 #content a.external { color: var(--sky) !important; }
.ns--1 #content a.external:hover { color: var(--gold) !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 {
  background: linear-gradient(90deg, rgba(0,0,0,0.15), rgba(0,0,0,0.05));
  color: var(--gold) !important;
}

/* ==========================================================================
   QUEST BOXES, PANELS, INFOBOXES (Soft Sandstone cards)
   ========================================================================== */
.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 */
.quest-header,

.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 * ,
.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 */
.quest-right .content, .quest-reward .content, .npc-bottombox .content {
  color: var(--midnight) !important;
  padding: 6px !important;
  margin: 0 !important;
  font-size: 14px;
}

/* ==========================================================================
   NPC LEGEND TABLE (gold card with dark text)
   ========================================================================== */
.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 */
.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;
  text-align: center;
  margin: 0;
  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; }

/* Column */
.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;
  color: var(--midnight) !important;
}

/* Level box */
.spell-lvl {
  width: 32px !important;
  min-width: 32px;
  text-align: center !important;
  border-right: 1px solid rgba(0,0,0,0.45) !important;
  padding: 2px 6px !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;
}

/* ==========================================================================
   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
   ========================================================================== */