MediaWiki:Common.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

/* ============================================================
   EQOA: Sandstorm / Norrath Stone Theme ΓÇö CLEANED MAIN CSS
   ============================================================ */

/* ------------------------------------------------------------
   ROOT VARIABLES
------------------------------------------------------------ */
:root {
  --midnight: #0F1626;
  --sand: #B9C4D1;
  --gold: #E3B44A;
  --sky: #6DA5E7;
  --evergreen: #3E6B52;
  --ember: #9A2E1E;
  --box-header: #1C2B44;
  --stone-bg: #242428;
  --stone-dark: #3C3C3C;
  --sand-light: #D6D6C9;
  --gold-accent: #D6B25E;
}

/* ------------------------------------------------------------
   GLOBAL PAGE BACKGROUND & HEADINGS
------------------------------------------------------------ */
body, #globalWrapper, #content, #mw-page-base, #mw-head-base {
  background: var(--stone-bg) !important;
  color: var(--sand-light) !important;
  font-family: "Segoe UI", "Roboto", sans-serif !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
}

h1, h2, h3, h4, h5, h6,
#firstHeading, .mw-first-heading {
  color: var(--sand-light) !important;
  font-weight: 700 !important;
  border: none !important;
}

h1 { font-size: 32px !important; }
h2 { font-size: 26px !important; }
h3 { font-size: 22px !important; }
h4, h5, h6 { font-size: 19px !important; }

/* ------------------------------------------------------------
   LINKS
------------------------------------------------------------ */
a, .mw-body a { color: var(--gold-accent) !important; }
a:visited { color: #BFBFBF !important; }
a:hover { color: #F0D9A0 !important; text-decoration: underline; }

/* ------------------------------------------------------------
   TABLES
------------------------------------------------------------ */
table, .wikitable, .npc-table, .zone-table, .class-mastery-table {
  background-color: var(--stone-bg) !important;
  border: 1px solid var(--stone-dark) !important;
  color: var(--sand-light) !important;
  border-collapse: collapse !important;
}

table th, .wikitable th, .npc-table th, .zone-table th, .class-mastery-table th {
  background-color: var(--stone-dark) !important;
  color: var(--sand-light) !important;
  border-bottom: 1px solid var(--gold-accent) !important;
  padding: 6px 10px;
  font-weight: bold;
}

table td, .wikitable td, .npc-table td, .zone-table td, .class-mastery-table td {
  padding: 6px 10px;
  border: 1px solid var(--stone-dark) !important;
}

table tr:nth-child(even) { background-color: #2A2A2E !important; }

/* ------------------------------------------------------------
   INPUTS & BUTTONS
------------------------------------------------------------ */
input, textarea, button, input[type="submit"], input[type="button"] {
  background-color: #2A2A2F !important;
  color: var(--sand-light) !important;
  border: 1px solid var(--stone-dark) !important;
}

button:hover, input[type="submit"]:hover, input[type="button"]:hover,
input:focus, textarea:focus { background-color: var(--gold-accent) !important; }


/* ------------------------------------------------------------
   PORTALS, BOXES, MAIN PAGE SECTIONS
------------------------------------------------------------ */
.portal, .navbox, .multicol, .mainpage-box, .mainpage-header,
div.center-box, #mp-topbanner, #mp-left, #mp-right {
  background-color: var(--stone-bg) !important;
  border: 1px solid var(--stone-dark) !important;
  color: var(--sand-light) !important;
}

.box-header, .portal .portal-header, .mainpage-header, .center-box .header {
  background-color: var(--stone-dark) !important;
  color: var(--gold-accent) !important;
  border-bottom: 2px solid var(--gold-accent) !important;
  text-align: center;
  padding: 6px 10px;
}

/* ------------------------------------------------------------
   SIDEBAR (MonoBook)
------------------------------------------------------------ */
#p-navigation, #p-interaction, #p-tb, #p-search, #mw-panel, #mw-panel div.portal {
  background-color: var(--stone-bg) !important;
  border: 1px solid var(--stone-dark) !important;
}

#p-navigation h3, #p-interaction h3, #p-tb h3, #p-search h3, #mw-panel .portal h3 {
  background-color: var(--stone-dark) !important;
  color: var(--sand-light) !important;
  padding: 4px 6px !important;
}

#p-search input[type="search"], #p-search input[type="text"] {
  font-size: 14px !important;
  padding: 5px 8px !important;
  width: 160px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ------------------------------------------------------------
   FOOTER
------------------------------------------------------------ */
#footer {
  background-color: var(--stone-bg) !important;
  border-top: 1px solid var(--stone-dark) !important;
  color: var(--sand-light) !important;
}

/* ------------------------------------------------------------
   SPELL LIST SYSTEM
------------------------------------------------------------ */
.spell-list, .SpellList, .SpellRow, .spell-list__cols, .spell-col {
  display: flex;
  flex-wrap: wrap;
  background-color: var(--stone-bg) !important;
  border: 1px solid var(--stone-dark) !important;
  color: var(--sand-light) !important;
  gap: 4px;
}

.spell-list__cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 6px; }
.spell-col { background-color: var(--stone-dark) !important; padding: 4px; border: 1px solid var(--gold-accent) !important; }
.spell-row { display: flex; align-items: center; gap: 1px; padding: 0; margin: 0; line-height: 1; min-height: 0; border-bottom: 1px solid rgba(227,180,74,0.06) !important; }
.spell-lvl { width: 26px; font-size: 16px !important; font-weight: bold; display:flex; align-items:center; margin-right:1px; }
.spell-data { display:flex; align-items:center; gap:1px; }
.spell-name { font-size:16px !important; line-height:1; }
.spell-icon-wrap img, .spell-icon img { width:20px; height:20px; display:inline-block; vertical-align:middle; margin:0; padding:0; }

/* Spell dividers */
.spell-divider { display:inline-block; align-self:stretch; width:1px; background:#F2D07A !important; margin:0 3px !important; }

/* ------------------------------------------------------------
   JOB PAGE
------------------------------------------------------------ */
.job-layout { display:flex; justify-content:center; align-items:flex-start; gap:150px; margin-top:0 !important; }
.job-left, .job-right { max-width:350px; margin-top:0 !important; padding-top:0 !important; }
.job-artwork { width:90%; max-width:450px; display:block; margin:0 auto; }
.job-infobox, .job-infobox-table, .job-infobox-header, .job-infobox-label td { background-color: var(--stone-bg) !important; color: var(--sand-light) !important; border:1px solid var(--stone-dark) !important; }

/* ------------------------------------------------------------
   QUEST TEMPLATE
------------------------------------------------------------ */
.quest-template, .quest-left, .quest-right, .quest-table, .quest-reward, .quest-walkthrough {
  background-color: var(--stone-bg) !important;
  color: var(--sand-light) !important;
  border:1px solid var(--stone-dark) !important;
  box-shadow:none !important;
}

.quest-header, .npc-header {
  background-color: var(--stone-dark) !important;
  color: var(--gold-accent) !important;
  padding:6px;
  border-bottom:1px solid var(--gold-accent) !important;
  text-align:center;
  font-weight:bold;
}

.quest-template a, .npc-template a { color: var(--gold-accent) !important; font-weight:bold; text-decoration:none; }
.quest-template a:hover, .npc-template a:hover { color: #F0D9A0 !important; text-decoration:underline; }

/* ------------------------------------------------------------
   NPC TEMPLATE
------------------------------------------------------------ */
.npc-template, .npc-left, .npc-right, .npc-box { background-color: var(--stone-bg) !important; color: var(--sand-light) !important; border:1px solid var(--stone-dark) !important; }
.npc-left { flex:1; min-width:300px; } .npc-right { flex:2; min-width:400px; }
.npc-image { text-align:center; margin-bottom:8px; }
.npc-table td { padding:6px; border:1px solid var(--stone-dark) !important; }

/* ------------------------------------------------------------
   INFO TABLE
------------------------------------------------------------ */
table.info-table tr td:first-child { background-color: var(--stone-dark) !important; color: var(--gold-accent) !important; font-weight:bold; }
table.info-table tr:nth-child(odd) td:last-child { background-color:#242428 !important; color: var(--sand-light) !important; }
table.info-table tr:nth-child(even) td:last-child { background-color:#2E2E31 !important; color: var(--sand-light) !important; }

/* ------------------------------------------------------------
   PAGE ACTION TABS ΓÇö HORIZON STYLE
------------------------------------------------------------ */
#p-cactions ul li a, #p-namespaces ul li a, #p-views ul li a {
  background: transparent !important;
  border:none !important;
  border-bottom:2px solid #6c5a2e !important;
  text-transform:capitalize !important;
  padding:4px 10px !important;
  color:#e8c46a !important;
  font-weight:bold;
}

#p-cactions ul li.selected a, #p-namespaces ul li.selected a, #p-views ul li.selected a {
  border-bottom:2px solid #ffcf63 !important;
  color:#ffffff !important;
  background:none !important;
}

#p-cactions ul li a:hover { color:#fff2b3 !important; border-bottom-color:#e8c46a !important; }