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:
/* CSS placed here will be applied to all skins */
/* ==========================================================================
/* Apply styles to the main content area of all special pages */
  EQOA - Option A Theme
 
  Palette variables for easy maintenance
.ns--1 #content {
  ========================================================================== */
    font-size: 16px; /* Adjust font size */
:root{
    font-family: Arial, sans-serif; /* Adjust font type */
  --midnight: #1A1F2B;   /* primary frame / headers */
     color: #FFD700; /* Adjust font color */
  --gold:    #D4A441;   /* highlights, accents */
    font-style: normal; /* Adjust font style */
  --sand:    #C7B89B;   /* infobox / card bg */
     background-color: #c4c4c4; /* Adjust background color */
  --sky:      #6C8BAE;   /* link color / subtle accents */
}
  --evergreen: #3A5C46; /* success / positive */
 
  --ember:    #A03B2C;   /* warnings / danger */
/* Exclude Content Header box */
  --light:   #EDEDED;   /* general content text on dark bg */
.ns--1 #content .content-header {
  --neutral-dark: #3E3E3E; /* UI neutrals where needed */
    color: inherit; /* Keep default font color for content header */
    background-color: inherit; /* Keep default background color for content header */
}
 
/* Ensure links in the main content area of special pages follow the same styling */
.ns--1 #content > :not(.content-header) a {
    font-size: 16px; /* Adjust font size for links */
    font-family: Arial, sans-serif; /* Adjust font type for links */
    color: #FFD700 !important; /* Adjust font color for links */
    font-style: normal; /* Adjust font style for links */
    text-decoration: none; /* Remove underline from links */
}
}


/* Ensure visited links in the main content area of special pages follow the same styling */
/* ==========================================================================
.ns--1 #content > :not(.content-header) a:visited {
  GLOBAL PAGE BACKGROUND & BASE TEXT
    color: #FFD700 !important; /* Adjust font color for visited links */
  ========================================================================== */
}
 
/* Ensure links in the main content area of special pages follow the same styling on hover */
.ns--1 #content > :not(.content-header) a:hover {
    color: #8e2631 !important; /* Adjust font color for links on hover */
    text-decoration: underline; /* Underline links on hover */
}
 
/* Apply the same style for URL text or any external links */
.ns--1 #content > :not(.content-header) a.external {
    font-size: 16px; /* Adjust font size for external links */
    font-family: Arial, sans-serif; /* Adjust font type for external links */
    color: #8e2631 !important; /* Adjust font color for external links */
    font-style: normal; /* Adjust font style for external links */
    text-decoration: none; /* Remove underline from external links */
}
 
/* Ensure external links in the main content area follow the same styling on hover */
.ns--1 #content > :not(.content-header) a.external:hover {
    color: #8e2631 !important; /* Adjust font color for external links on hover */
    text-decoration: underline; /* Underline external links on hover */
}
 
/* Style headers in the main content area of special pages */
.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-size: 24px; /* Adjust font size for headers */
    font-family: Arial, sans-serif; /* Adjust font type for headers */
    color: #8e2631; /* Adjust font color for headers */
    font-style: normal; /* Adjust font style for headers */
}
 
/* Style headers in the main content area of special pages on hover */
.ns--1 #content > :not(.content-header) h1:hover,
.ns--1 #content > :not(.content-header) h2:hover,
.ns--1 #content > :not(.content-header) h3:hover,
.ns--1 #content > :not(.content-header) h4:hover,
.ns--1 #content > :not(.content-header) h5:hover,
.ns--1 #content > :not(.content-header) h6:hover {
    color: #8e2631; /* Adjust font color for headers on hover */
}
 
 
 
 
 
 
 
/* === GLOBAL PAGE BACKGROUND === */
html, body {
html, body {
   background-color: #cccccc !important;
   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;
   background-image: none !important;
  color: #000000;
}
}


/* Apply consistent background across layout sections */
/* Layout containers to use the frame color (keeps consistent) */
#mw-page-base,
#mw-page-base,
#mw-head-base,
#mw-head-base,
#mw-head,
#mw-head,
#mw-panel,
#mw-panel,
#content,
#content,
#footer,
#footer,
#mw-footer,
#mw-footer,
#mw-data-after-content,
#mw-wrapper,
#mw-wrapper,
#mw-data-before-content {
#mw-data-before-content,
   background-color: #cccccc !important;
#mw-data-after-content {
  background-image: none !important;
   background-color: transparent !important;
   border: none !important;
   border: none !important;
}
}


/* === SIDEBAR STYLING === */
/* Ensure body content area uses readable parchment-like cards */
#mw-panel,
#content, #mw-content-text, .mw-body {
#mw-panel h3,
   color: var(--light) !important;
#mw-panel a {
  color: #ffffff !important;
  background: none !important;
}
 
#mw-panel a:hover {
  color: #f68825 !important;
  text-decoration: underline;
}
 
/* === MAIN CONTENT AREA === */
#mw-content-text,
#contentSub,
#siteSub,
#bodyContent {
  background: none !important;
}
 
.mw-body,
#mw-content-text {
   color: #000000;
}
}


/* === LOGO AREA FIXED === */
/* ==========================================================================
  LOGO AREA
  ========================================================================== */
#p-logo {
#p-logo {
   background-color: #cccccc !important;
   background: transparent !important;
   margin: 0 !important;
   margin: 0 !important;
   padding: 0 !important;
   padding: 0 !important;
Line 140: Line 60:
}
}


/* Restore and center the logo image */
#p-logo a {
#p-logo a {
   display: block;
   display: block;
Line 153: Line 72:
   border: none !important;
   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;
}


/* Ensure no invisible overlays block the logo */
/* Top nav links */
#p-logo a img,
#p-personal a, #p-views a, #right-navigation a, #left-navigation a,
#p-logo img {
#p-personal .mw-portlet-body, #p-views .mw-portlet-body {
   display: none !important; /* Hide fallback <img> if present */
   color: var(--light) !important;
  font-weight: 600;
}
}


/* === TOP NAVIGATION BAR THEMING === */
#p-personal a:hover, #p-views a:hover,
#mw-head,
#right-navigation a:hover, #left-navigation a:hover,
#p-personal,
#p-personal li.active a, #p-views li.selected a {
#p-views,
   color: var(--gold) !important;
#right-navigation,
   text-decoration: underline;
#left-navigation {
   background-color: #cccccc !important;
   background-image: none !important;
  border: none !important;
}
}


/* Navigation bar text */
/* Sidebar panel headings */
#p-personal a,
#mw-panel .portal .portal-title {
#p-views a,
  font-size: 1.05em;
#right-navigation a,
  font-weight: 700;
#left-navigation a {
  padding: 6px 8px;
   color: #ffffff !important;
   color: var(--gold);
   font-weight: bold;
   border-bottom: 1px solid rgba(255,255,255,0.06);
  background: transparent !important;
}
}


/* Hover and active states */
/* Sidebar links neutral */
#p-personal a:hover,
#mw-panel .portal a {
#p-views a:hover,
   color: var(--light) !important;
#right-navigation a:hover,
#left-navigation a:hover,
#p-personal li.active a,
#p-views li.selected a {
   color: #f68825 !important;
  text-decoration: underline;
}
}
#mw-panel a:hover { color: var(--gold) !important; }


/* Remove any white separator line */
/* ==========================================================================
#mw-head-base {
  BASE CONTENT STYLING (NS-1 content area preserved)
   border-bottom: none !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 */
.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 */
/* MediaWiki:Common.css */
.ns--1 #content > :not(.content-header) h1,
.quest-reward { background-color: #cccccc !important; }
.ns--1 #content > :not(.content-header) h2,
.quest-reward, .quest-reward * { background-color: transparent !important; }
.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;
/* MediaWiki:Common.css */
  color: var(--gold);
/* Force any inner elements inside quest right column to be transparent */
   font-weight: 700;
.quest-right,
  margin: 0 0 8px 0;
.quest-reward,
.quest-walkthrough {
   background-color: #cccccc !important; /* keep outer gray */
   border-color: transparent !important;
}
}


/* Override inner whites and borders */
/* Subheadings / section titles (darker strip) */
.quest-right * ,
.section-title, .right-header, .infobox-title {
.quest-reward * ,
   background: linear-gradient(90deg, rgba(0,0,0,0.15), rgba(0,0,0,0.05));
.quest-walkthrough * {
   color: var(--gold) !important;
   background: transparent !important;
   background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
}


/* Keep outer gray box */
/* ==========================================================================
  QUEST BOXES, PANELS, INFOBOXES (Soft Sandstone cards)
  ========================================================================== */
.quest-right,
.quest-right,
.quest-reward,
.quest-reward,
.quest-walkthrough {
.quest-walkthrough,
   background-color: #cccccc !important;
.zone-desc-box,
   border: none !important;
.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;
}
}


/* Restore the orange header */
/* Quest headers restore to gold title bar */
.quest-header {
.quest-header,
   background-color: #f68825 !important;
.zone-desc-header,
   color: white !important;
.right-header,
   border: none !important;
.spell-list__title,
.infobox-title {
   background-color: var(--midnight) !important;
   color: var(--gold) !important;
   padding: 6px 10px !important;
  border-radius: 3px;
}
}


/* Force any inner white backgrounds to disappear */
/* Kill inner white boxes from skins to preserve the sandstone card */
.quest-right * ,
.quest-right * ,
.quest-reward * ,
.quest-reward * ,
.quest-walkthrough * {
.quest-walkthrough * ,
.zone-desc-box * ,
.npc-bottombox * {
   background: transparent !important;
   background: transparent !important;
   background-color: transparent !important;
   background-color: transparent !important;
   border: 0 !important;
   border: 0 !important;
   box-shadow: none !important;
   box-shadow: none !important;
  color: inherit !important;
}
}


 
/* Small utility for content inside cards */
/* Adjust panel content to move down slightly, so it doesnΓÇÖt overlap the logo */
.quest-right .content, .quest-reward .content, .npc-bottombox .content {
#mw-panel {
   color: var(--midnight) !important;
  padding-top: 170px !important; /* adjust to your logo height */
   padding: 6px !important;
}
 
/* Remove space above sidebar logo */
#p-logo {
   margin-top: 0 !important;
  padding-top: 0 !important;
  position: absolute !important;
  top: 0 !important;
}
 
/* === FIX: Restore orange headers for Reward and Walkthrough === */
.quest-header {
  background-color: #d86f34!important;
  color: white !important;
   padding: 5px !important;
  border: none !important;
   margin: 0 !important;
   margin: 0 !important;
  font-size: 14px;
}
}


.quest-header h2,
/* ==========================================================================
.quest-header {
  NPC LEGEND TABLE (gold card with dark text)
   background-color: #d86f34!important;
  ========================================================================== */
   color: white !important;
.npc-legend-table {
   text-align: left;
   background-color: var(--gold) !important;
   padding: 6px 10px !important;
   color: var(--midnight) !important;
  border: 2px solid #000 !important;
   border-collapse: collapse !important;
   border-spacing: 0 !important;
   margin: 0 !important;
   margin: 0 !important;
  border-radius: 3px;
  border: none !important;
}
/* === Global Link Style === */
a,
a:visited,
a:active {
  color: #c51c19!important;      /* Makes all links white */
  font-weight: bold;          /* Makes them bold */
  text-decoration: none;      /* Removes underline */
}
/* Optional: hover effect for better UX */
a:hover {
  color: #f9ce41 !important;  /* Light gold highlight on hover */
  text-decoration: underline;  /* Adds underline on hover */
}
/* Scoped overrides only for NPC right panel legend/table to prevent white bg from skin */
.mw-parser-output .npc-right-panel,
.mw-parser-output .npc-right-panel * {
    background-color: transparent !important;
    background: transparent !important;
}
/* Allow the template to style the legend table and its cells */
.mw-parser-output .npc-right-panel table.wikitable,
.mw-parser-output .npc-right-panel table.wikitable tr,
.mw-parser-output .npc-right-panel table.wikitable td,
.mw-parser-output .npc-right-panel table.wikitable th {
    background-color: inherit !important;
    background: inherit !important;
}
/* If you want the legend table forced to your gold color, this makes it explicit */
.mw-parser-output .npc-right-panel table.wikitable.legend-force {
    background-color: #D1A84C !important;
    color: #2C1F0F !important;
    border:2px solid #2C1F0F !important;
}
.mw-parser-output .npc-right-panel table.wikitable.legend-force tr,
.mw-parser-output .npc-right-panel table.wikitable.legend-force td {
    background-color: #D1A84C !important;
    color: #2C1F0F !important;
}
/* ********* Scoped NPC bottom-box fixes (ONLY affects .npc-bottombox) ********* */
/* Base: ensure the container has the panel color and no inner white boxes */
.mw-parser-output .npc-bottombox {
  background-color: #E0D6CC !important;
  border: 2px solid #2C1F0F !important;
   padding: 0 !important;
   padding: 0 !important;
  margin-top: 12px !important;
}
}
 
.npc-legend-table td, .npc-legend-table th {
/* Kill white backgrounds on any auto-inserted paragraphs inside only this box */
.mw-parser-output .npc-bottombox p,
.mw-parser-output .npc-bottombox p * {
   background: transparent !important;
   background: transparent !important;
   background-color: transparent !important;
   color: var(--midnight) !important;
  margin: 0 !important;
   padding: 6px !important;
  padding: 0 !important;
}
 
/* Kill white backgrounds that some skins place on direct children */
.mw-parser-output .npc-bottombox > * {
  background: transparent !important;
  background-color: transparent !important;
}
 
/* If skin wraps elements in extra divs (Vector/Citizen/Timeless), nuke their bg here */
.mw-parser-output .npc-bottombox .mw-parser-output,
.mw-parser-output .npc-bottombox .thumb,
.mw-parser-output .npc-bottombox .box,
.mw-parser-output .npc-bottombox .mw-collapsible,
.mw-parser-output .npc-bottombox .module {
  background: transparent !important;
  background-color: transparent !important;
}
 
/* Force any table cells inside to display desired panel bg (cells sometimes default white) */
.mw-parser-output .npc-bottombox td,
.mw-parser-output .npc-bottombox th,
.mw-parser-output .npc-bottombox tr {
  background: transparent !important;
   background-color: transparent !important;
   border: none !important;
   border: none !important;
}
}


/* If a skin uses pseudo-elements to paint a box, remove it inside this container */
/* Legend content block */
.mw-parser-output .npc-bottombox::before,
.mw-parser-output .npc-bottombox::after,
.mw-parser-output .npc-bottombox *::before,
.mw-parser-output .npc-bottombox *::after {
  background: transparent !important;
  background-color: transparent !important;
}
 
/* If you want to be extra-paranoid, force any inline style backgrounds to inherit */
.mw-parser-output .npc-bottombox * {
  background: inherit !important;
  background-color: inherit !important;
}
 
/* Remove white BG + border ONLY from the right-column text areas */
.eqoa-detail-table,
.eqoa-detail-table td {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
 
.right-header {
    background-color:#D1A84C !important;
    color:#2C1F0F !important;
    padding:6px !important;
    margin:0 !important;
    border:2px solid #2C1F0F !important;
}
 
/* Kill white background for Legend table only */
.npc-legend-table,
.npc-legend-table td,
.npc-legend-table tr {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
 
/* Kill any skin-injected white background inside the legend table */
.npc-legend-table *,
.npc-legend-table td {
    background: transparent !important;
    background-color: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* === NPC Legend Table Fixes === */
.npc-legend-table {
    background-color: #D1A84C !important;  /* EQOA Gold bg */
    border: 2px solid #000 !important;    /* Black border */
    border-collapse: collapse !important;
    border-spacing: 0 !important;          /* remove inner spacing */
    margin: 0 !important;
    padding: 0 !important;
}
 
.npc-legend-table td {
    background: transparent !important;    /* remove skin-injected bg */
    border: none !important;              /* remove inner borders */
    padding: 0 !important;                /* remove internal padding */
}
 
.npc-legend-table .npc-legend-content {
.npc-legend-table .npc-legend-content {
    background-color: #D1A84C !important;  /* gold background */
  background: var(--gold) !important;
    color: #2C1F0F !important;            /* text color */
  color: var(--midnight) !important;
    padding: 6px !important;              /* controlled padding inside div */
  padding: 6px !important;
    margin: 0 !important;
}
 
.npc-legend-table b {
    background: transparent !important;    /* bold text bg */
}
 
/* remove any skin-injected pseudo-elements that may create a box */
.npc-legend-table::before,
.npc-legend-table::after,
.npc-legend-table *::before,
.npc-legend-table *::after {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
 
 
/* Remove global table cell background interfering with spells */
.spell-col {
    background: none !important;
    padding: 0 !important;
    margin: 0;
    line-height: 1.6;
}
 
/* Each spell entry becomes a row */
.spell-col > div {
    padding: 4px 6px;
    border-bottom: 1px solid #1D4429;
}
 
/* Remove last border */
.spell-col > div:last-child {
    border-bottom: none;
}
}


 
/* ==========================================================================
/* common.css - spell list compact style */
  SPELL LIST / SPELL ROWS (compact Horizon style preserved)
 
  ========================================================================== */
/* Container / list */
.spell-list {
.spell-list {
   background-color: #DFF3EA;
   background-color: transparent;
   border: 2px solid #1D4429;
   border: 2px solid rgba(0,0,0,0.45);
   margin: 0;
   margin: 0;
   padding: 0;
   padding: 6px;
   box-sizing: border-box;
   box-sizing: border-box;
   font-family: "Courier New", monospace;
   font-family: "Courier New", monospace;
  color: var(--midnight);
}
}


/* Header */
/* Title */
.spell-list__title {
.spell-list__title {
   background-color: #2B6E3C;
   background-color: var(--midnight) !important;
   color: #fff;
   color: var(--gold) !important;
   text-align: center;
   text-align: center;
   margin: 0;
   margin: 0;
   padding: 6px 8px;
   padding: 6px 8px;
   border-bottom: 2px solid #1D4429;
   border-bottom: 2px solid rgba(0,0,0,0.4);
   font-weight: 600;
   font-weight: 700;
   font-size: 14px;
   font-size: 14px;
}
}


/* Columns wrapper */
/* Columns wrapper */
.spell-list__cols {
.spell-list__cols { display:flex; gap:6px; padding:6px; }
  display: flex;
  gap: 5px;
  padding: 6px;
  box-sizing: border-box;
}


/* Each column */
/* Column */
.spell-col {
.spell-col {
   flex: 1;
   flex: 1;
   min-width: 200px;
   min-width: 200px;
   border: 1px solid #1D4429;
   border: 1px solid rgba(0,0,0,0.35);
   padding: 4px;
   padding: 4px;
   box-sizing: border-box;
   box-sizing: border-box;
Line 544: Line 282:
}
}


/* Ultra-compact spell rows, no white backgrounds */
/* Individual row */
 
.spell-row {
.spell-row {
   display: flex;
   display: flex !important;
   align-items: center;
   align-items: center !important;
   gap: 4px;
   gap: 6px;
   padding: 1px 2px;           /* tighter row padding */
   padding: 4px 6px !important;
   border-bottom: 1px solid #1D4429;
   border-bottom: 1px solid rgba(0,0,0,0.35) !important;
   line-height: 1.0;
   line-height: 1 !important;
   background: transparent;
  min-height: 24px !important;
   background: transparent !important;
  color: var(--midnight) !important;
}
}


/* Level box */
.spell-lvl {
.spell-lvl {
   width: 26px;                 /* fixed width so numbers never wrap */
   width: 32px !important;
   min-width: 26px;
   min-width: 32px;
   height: 16px;                /* very short like FFXI rows */
   text-align: center !important;
  display: flex;
   border-right: 1px solid rgba(0,0,0,0.45) !important;
   align-items: center;
   padding: 2px 6px !important;
   justify-content: center;
   font-weight: 700;
   font-weight: 700;
   border: 1px solid #1D4429;
   background: transparent !important;
   background: transparent;     /* remove white background */
   color: var(--midnight) !important;
   font-size: 11px;
   font-size: 12px !important;
  padding: 0;
  margin: 0;
  line-height: 1;
}
}


.spell-data {
/* Icon + name */
  display: flex;
.spell-data { display:flex !important; align-items:center !important; gap:6px !important; width:100%; }
  align-items: center;
.spell-icon { width:20px !important; height:20px !important; display:inline-block !important; background-size:cover; }
  gap: 2px;                   /* minimal spacing */
.spell-name { padding:0 !important; margin:0 !important; font-size:13px; color:var(--midnight) !important; }
  padding: 0;
 
}
/* Make sure nothing inside rows forces white backgrounds */
.spell-row * { background: transparent !important; border: none !important; box-shadow:none !important; }


.spell-icon {
/* ==========================================================================
   width: 12px;                 /* smaller icon reduces row height */
  TABLES, WIKITABLES, AND GENERIC CARDS
   height: 12px;
  ========================================================================== */
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;
}
}


.spell-name {
table.wikitable th, table.wikitable td {
   padding: 1px 4px;           /* super compact label */
   padding: 6px !important;
  background: transparent;    /* remove white background */
   border: 1px solid rgba(0,0,0,0.12) !important;
   border: 1px;                /* no bubble, flat text like FFXI */
  font-size: 12px;
  line-height: 1;
  margin: 0;
}
}


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


 
/* ==========================================================================
/* Remove extra vertical padding from parent containers */
  ZONE DESCRIPTION BOX (purple -> use midnight + sand)
.spell-col,
  ========================================================================== */
.spell-list__cols,
.zone-desc-box {
.spell-list {
  background: var(--sand) !important;
   padding-top: 2 !important;
   border: 2px solid rgba(0,0,0,0.5) !important;
   padding-bottom: 2 !important;
   padding: 6px !important;
   line-height: 1 !important;
   color: var(--midnight) !important;
}
}
 
.zone-desc-header {
/* Ultra-tight row container */
   background: var(--midnight) !important;
.spell-row {
   color: var(--gold) !important;
   padding-top: 2 !important;
   padding: 6px !important;
   padding-bottom: 2 !important;
  margin-top: 2 !important;
  margin-bottom: 2 !important;
   line-height: 1 !important;
  height: 18px;              /* forces tight row height */
}
}


/* Level box compact */
/* Clear paragraph wrappers that create white boxes */
.spell-lvl {
.zone-desc-box > p, .zone-desc-header > p, .zone-description p, .zone-description blockquote {
   height: 14px !important;
   margin:0 !important;
   line-height: 14px !important;
   padding:0 !important;
   padding: 0 !important;
  background:transparent !important;
   margin: 0 !important;
   border:none !important;
   color: inherit !important;
}
}


/* Spell name compact */
/* ==========================================================================
.spell-name {
  NPC BOTTOM BOX (kept sandstone with dark border)
   padding: 0 !important;
  ========================================================================== */
   margin: 0 !important;
.mw-parser-output .npc-bottombox {
   line-height: 14px !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;
}
}


/* Spell icon smaller so it can't force height up */
/* Force internal elements transparent to keep card look */
.spell-icon {
.mw-parser-output .npc-bottombox * {
  width: 12px !important;
  height: 12px !important;
}
 
/* FORCE remove white background from Spell Name */
.spell-name {
   background: transparent !important;
   background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
   border: none !important;
   border: none !important;
  box-shadow: none !important;
}
}


 
/* ==========================================================================
 
  GLOBAL LINKS (fallbacks)
 
  ========================================================================== */
 
a, a:visited, a:active {
 
  color: var(--sky) !important;
 
  font-weight: 600;
/* RESTORE HEADER BACKGROUND */
  text-decoration: none;
.spell-list__title {
    background: #2B6E3C !important;
    color: white !important;
}
}
a:hover { color: var(--gold) !important; text-decoration: underline; }


/* REMOVE ALL BACKGROUNDS ONLY INSIDE SPELL ROWS */
/* ==========================================================================
.spell-row,
  ALERTS / STATUS COLORS
.spell-row * {
  ========================================================================== */
    background: transparent !important;
.alert-success { color: var(--evergreen) !important; }
    border: none !important;
.alert-danger  { color: var(--ember) !important; }
    box-shadow: none !important;
.badge-gold { background: var(--gold); color: var(--midnight); padding: 2px 6px; border-radius: 3px; }
}
/* Restore border ONLY for the level column */
.spell-lvl {
    border: 1px solid #1D4429 !important;
}


/* ==========================================================================
  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; }
/* FORCE SPELL ROWS TO DISPLAY AS HORIZON STYLE  */
  #mw-panel { padding-top: 120px !important; }
/* --------------------------------------------- */
 
/* Make each row a tight horizontal bar */
.spell-row {
    display: flex !important;
    align-items: center !important;
    border-bottom: 1px solid #1D4429 !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 24px !important;
}
 
/* Level column ΓÇö fixed width, solid border */
.spell-lvl {
    width: 32px !important;
    text-align: center !important;
    border-right: 1px solid #1D4429 !important;
    border-left: 1px solid #1D4429 !important;
    border-top: 1px solid #1D4429 !important;
    border-bottom: none !important;
    padding: 2px 0 !important;
    margin: 0 !important;
}
 
/* Spell data (icon + name) flush and compact */
.spell-data {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 2px 4px !important;
    margin: 0 !important;
    width: 100% !important;
}
 
/* Icon small + tight spacing */
.spell-icon {
    width: 20px !important;
    height: 20px !important;
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
}
}


/* Spell name flush */
/* ==========================================================================
.spell-name {
  END OF THEME
    margin: 0 !important;
  ========================================================================== */
    padding: 0 !important;
    line-height: 1.1 !important;
}
 
/* Columns should not add spacing */
.spell-col {
    padding: 0 !important;
    margin: 0 !important;
}
 
/* Remove unwanted h2 spacing */
.spell-list__title {
    margin-bottom: 4px !important;
}
 
 
 
/* FIX LEVEL BORDERS EXACTLY LIKE HORIZON */
.spell-row {
    border: 1px solid #1D4429 !important;
    border-top: none !important; /* Rows stack cleanly */
}
 
.spell-row:first-child {
    border-top: 1px solid #1D4429 !important; /* Add top border only once */
}
 
.spell-lvl {
    width: 32px !important;
    text-align: center !important;
 
    /* Only right border for the divider line */
    border-right: 1px solid #1D4429 !important;
 
    /* remove other borders */
    border-top: none !important;
    border-left: none !important;
    border-bottom: none !important;
 
    padding: 0 !important;
    margin: 0 !important;
}
 
 
/* Sidebar section headers */
#mw-panel .portal .portal-title {
    font-size: 1.2em;
    font-weight: bold;
    padding: 6px 0;
    color: #d4ad48; /* Sandstorm gold-ish */
    border-bottom: 1px solid #444;
}
 
/* Sidebar links */
#mw-panel .portal .body ul li {
    margin-left: 10px;
}
 
/* Optional: hover effect */
#mw-panel .portal .body ul li a:hover {
    text-decoration: underline;
}
 
 
 
 
---------------------------------------------------------------------------------------------------------------------------------------
 
 
/* Prevent MediaWiki from wrapping header in a <p> that creates a white box */
.zone-desc-box > p,
.zone-desc-header > p {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}
 
/* Make sure the BOX stays purple */
.zone-desc-box {
    background:#F4E2EE !important;
    border:2px solid #7A3A63 !important;
}
 
/* Make sure the HEADER stays purple */
.zone-desc-header {
    background:#7A3A63 !important;
    color:white !important;
}
 
/* Clean description content WITHOUT removing the box background */
.zone-description p,
.zone-description blockquote {
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    border:none !important;
}

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