MediaWiki:Common.css: Difference between revisions
From EQOA Sandstorm Wiki
Jump to navigationJump to search
RenodorDev (talk | contribs) (Replaced content with "→============================================ NPC TEMPLATE ΓÇö MATCH QUEST STYLE EXACTLY ============================================: →NPC wrapper: .npc-template { background-color: #242428 !important; color: #D6D6C9 !important; display: flex; flex-wrap: wrap; gap: 10px; } →Left / Right columns: .npc-left, .npc-right { background-color: #242428 !important; color: #D6D6C9 !important; border-color: #3C3C3C !important; }...") |
RenodorDev (talk | contribs) No edit summary |
||
| Line 1: | Line 1: | ||
/* ============================================ | /* ========================================================= | ||
GLOBAL COLOR SCHEME | |||
============================================ */ | Dark stone (#242428), Dark slate (#3C3C3C), Gold (#E6C98B), | ||
Pale sand (#D6D6C9), Slightly lighter navy (#2E2E31), Header dark (#2B2B2B) | |||
========================================================= */ | |||
/* | /* ------------------------- | ||
.npc-template { | BODY & MAIN CONTENT | ||
background-color: # | ------------------------- */ | ||
color: # | body, #content, #mw-content-text, #column-content { | ||
background-color: #242428 !important; /* Dark stone */ | |||
color: #D6D6C9 !important; /* Pale sand */ | |||
} | |||
/* ------------------------- | |||
LINKS | |||
------------------------- */ | |||
a, .mw-body a, .quest-template a, .npc-template a, table a, .wikitable a { | |||
color: #E6C98B !important; | |||
font-weight: bold !important; | |||
text-decoration: none !important; | |||
} | |||
a:hover, .mw-body a:hover, .quest-template a:hover, .npc-template a:hover, table a:hover, .wikitable a:hover { | |||
color: #F0D9A0 !important; | |||
text-decoration: underline !important; | |||
} | |||
/* ------------------------- | |||
SIDEBAR & HEADERS | |||
------------------------- */ | |||
#column-one { | |||
width: 220px !important; | |||
float: left !important; | |||
overflow: hidden !important; | |||
box-sizing: border-box !important; | |||
} | |||
#column-one h3[id^="p-"], .portlet h5 { | |||
background-color: #2B2B2B !important; | |||
color: #E6C98B !important; | |||
border: 2px solid #D6B25E !important; | |||
font-family: "Trebuchet MS", Arial, sans-serif !important; | |||
font-size: 18px !important; | |||
font-weight: 900 !important; | |||
text-align: center !important; | |||
padding: 12px 10px !important; | |||
margin: 0 !important; | |||
border-radius: 6px 6px 0 0 !important; | |||
} | |||
/* Sidebar list */ | |||
#column-one ul { | |||
list-style-type: none !important; | |||
margin: 0 !important; | |||
padding-left: 10px !important; | |||
} | |||
#column-one li { | |||
padding: 2px 0 !important; | |||
} | |||
/* ------------------------- | |||
SEARCH BAR | |||
------------------------- */ | |||
#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; | |||
} | |||
#p-search { | |||
width: 200px !important; | |||
overflow: hidden !important; | |||
} | |||
/* ------------------------- | |||
PAGE TABS | |||
------------------------- */ | |||
#p-views ul li a, #p-cactions ul li a { | |||
background: #3C3C3C !important; | |||
color: #E6C98B !important; | |||
border-bottom: 2px solid #D6B25E !important; | |||
text-transform: lowercase !important; | |||
padding: 4px 10px !important; | |||
font-weight: bold; | |||
} | |||
#p-views ul li.selected a, #p-cactions ul li.selected a { | |||
color: #fff2c2 !important; | |||
border-bottom: 2px solid #D6B25E !important; | |||
} | |||
#p-views ul li a:hover, #p-cactions ul li a:hover { | |||
color: #F0D9A0 !important; | |||
} | |||
/* ------------------------- | |||
NPC TEMPLATE (UNIFIED) | |||
------------------------- */ | |||
.npc-template, .quest-right, .exp-camp-wrapper { | |||
background-color: #242428 !important; /* Dark stone */ | |||
color: #D6D6C9 !important; /* Pale sand */ | |||
} | } | ||
/* | /* NPC columns */ | ||
.npc-left, .npc-right { | .npc-left, .npc-right { | ||
background-color: #242428 !important; | background-color: #242428 !important; | ||
| Line 21: | Line 110: | ||
.npc-right { flex: 2; min-width: 400px; } | .npc-right { flex: 2; min-width: 400px; } | ||
/* | /* NPC header */ | ||
.npc-header { | .npc-header, .zones-header { | ||
background-color: #3C3C3C !important; | background-color: #3C3C3C !important; | ||
color: #E6C98B !important; | color: #E6C98B !important; | ||
font-weight: bold; | |||
text-align: center; | text-align: center; | ||
padding: 6px; | |||
margin: 0; | |||
border-bottom: 2px solid #D6B25E !important; | |||
} | } | ||
/* | /* NPC box & image */ | ||
.npc-box { | .npc-box { | ||
border: 1px solid #3C3C3C !important; | border: 1px solid #3C3C3C !important; | ||
border-radius: 4px; | border-radius: 4px; | ||
padding: 10px !important; | padding: 10px !important; | ||
} | } | ||
.npc-image { text-align: center; margin-bottom: 8px !important; } | |||
/* | /* NPC tables */ | ||
.npc- | .npc-table, table.info-table, table.npc-zone-table, .exp-camp-table { | ||
. | |||
width: 100% !important; | width: 100% !important; | ||
border-collapse: collapse !important; | border-collapse: collapse !important; | ||
background-color: #242428 !important; | background-color: #242428 !important; | ||
color: #D6D6C9 !important; | color: #D6D6C9 !important; | ||
} | } | ||
.npc- | .npc-table td, table.info-table td, table.npc-zone-table td, .exp-camp-table td { | ||
padding: 4-6px !important; | |||
border: 1px solid #3C3C3C !important; | |||
background-color: #242428 !important; | background-color: #242428 !important; | ||
color: #D6D6C9 !important; | color: #D6D6C9 !important; | ||
} | } | ||
/* | /* Info table stripes */ | ||
.npc- | table.info-table tr:nth-child(odd) td:last-child { background: #242428 !important; } | ||
table.info-table tr:nth-child(even) td:last-child { background: #2E2E31 !important; } | |||
table.info-table tr td:first-child { background: #3C3C3C !important; font-weight: bold; } | |||
/* NPC zone table stripes */ | |||
table.npc-zone-table tr:nth-child(odd):not(:first-child) { background: #242428 !important; } | |||
table.npc-zone-table tr:nth-child(even):not(:first-child) { background: #2E2E31 !important; } | |||
/* NPC Name / Infobox */ | |||
.infobox { border: 4px solid #555 !important; border-radius: 6px; } | |||
.npcname-header, .infobox .npcname-row td { | |||
background-color: #2B2B2B !important; | |||
color: #E6C98B !important; | color: #E6C98B !important; | ||
text-align: center; | |||
border: 2px solid #D6B25E !important; | |||
font-weight: bold; | font-weight: bold; | ||
padding: 6px; | |||
padding:6px | |||
} | } | ||
/* | /* EXP Camp unified */ | ||
. | .exp-camp-wrapper { text-align: center; } | ||
.exp-camp-table th { | |||
background-color: #2B2B2B !important; | background-color: #2B2B2B !important; | ||
color: #E6C98B !important; | color: #E6C98B !important; | ||
border: 1px solid #D6B25E !important; | |||
border | |||
} | } | ||
.exp-camp-row:nth-child(odd) td { background: #242428 !important; } | |||
.exp-camp-row:nth-child(even) td { background: #2E2E31 !important; } | |||
/* | /* Quest-right first paragraph fix */ | ||
.quest-right > div > p:first-child, | |||
.quest-right p:first-of-type { | |||
margin-top: 0 !important; | |||
padding-top: 0 !important; | |||
} | } | ||
/* | /* ------------------------- | ||
MISC CLEANUP | |||
------------------------- */ | |||
#content, #column-content { margin-left: 240px !important; padding-top: 0 !important; } | |||
#p-logo { width: 220px !important; position: absolute !important; top: 0; left: 0; z-index: 9999; } | |||
.cm-tabs input[type="radio"] { display: none; } | |||
.cm-tabs .cm-tab-content { display: none; padding: 16px; border-top: 1px solid #3C3C3C; background: #242428; color: #D6D6C9; } | |||
. | .cm-tabs #tab-archetype:checked ~ .cm-archetype, | ||
.cm-tabs #tab-class:checked ~ .cm-class { display: block; } | |||
.cm-tabs .tab-label { padding: 8px 16px; background: #3C3C3C; border-right: 1px solid #D6B25E; color: #E6C98B; cursor: pointer; display: inline-block; } | |||
.cm-tabs .tab-label:hover { background: #2E2E31; } | |||
} | |||
/* | /* Force sidebar & content layout */ | ||
#column-one, #mw-panel { float: left; width: 220px !important; box-sizing: border-box; } | |||
#content, #column-content, #mw-content-text { margin-left: 240px !important; position: relative !important; } | |||
/* | /* Everything else inherits NPC color scheme automatically */ | ||
Revision as of 06:43, 25 November 2025
/* =========================================================
GLOBAL COLOR SCHEME
Dark stone (#242428), Dark slate (#3C3C3C), Gold (#E6C98B),
Pale sand (#D6D6C9), Slightly lighter navy (#2E2E31), Header dark (#2B2B2B)
========================================================= */
/* -------------------------
BODY & MAIN CONTENT
------------------------- */
body, #content, #mw-content-text, #column-content {
background-color: #242428 !important; /* Dark stone */
color: #D6D6C9 !important; /* Pale sand */
}
/* -------------------------
LINKS
------------------------- */
a, .mw-body a, .quest-template a, .npc-template a, table a, .wikitable a {
color: #E6C98B !important;
font-weight: bold !important;
text-decoration: none !important;
}
a:hover, .mw-body a:hover, .quest-template a:hover, .npc-template a:hover, table a:hover, .wikitable a:hover {
color: #F0D9A0 !important;
text-decoration: underline !important;
}
/* -------------------------
SIDEBAR & HEADERS
------------------------- */
#column-one {
width: 220px !important;
float: left !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
#column-one h3[id^="p-"], .portlet h5 {
background-color: #2B2B2B !important;
color: #E6C98B !important;
border: 2px solid #D6B25E !important;
font-family: "Trebuchet MS", Arial, sans-serif !important;
font-size: 18px !important;
font-weight: 900 !important;
text-align: center !important;
padding: 12px 10px !important;
margin: 0 !important;
border-radius: 6px 6px 0 0 !important;
}
/* Sidebar list */
#column-one ul {
list-style-type: none !important;
margin: 0 !important;
padding-left: 10px !important;
}
#column-one li {
padding: 2px 0 !important;
}
/* -------------------------
SEARCH BAR
------------------------- */
#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;
}
#p-search {
width: 200px !important;
overflow: hidden !important;
}
/* -------------------------
PAGE TABS
------------------------- */
#p-views ul li a, #p-cactions ul li a {
background: #3C3C3C !important;
color: #E6C98B !important;
border-bottom: 2px solid #D6B25E !important;
text-transform: lowercase !important;
padding: 4px 10px !important;
font-weight: bold;
}
#p-views ul li.selected a, #p-cactions ul li.selected a {
color: #fff2c2 !important;
border-bottom: 2px solid #D6B25E !important;
}
#p-views ul li a:hover, #p-cactions ul li a:hover {
color: #F0D9A0 !important;
}
/* -------------------------
NPC TEMPLATE (UNIFIED)
------------------------- */
.npc-template, .quest-right, .exp-camp-wrapper {
background-color: #242428 !important; /* Dark stone */
color: #D6D6C9 !important; /* Pale sand */
}
/* NPC columns */
.npc-left, .npc-right {
background-color: #242428 !important;
color: #D6D6C9 !important;
border-color: #3C3C3C !important;
}
.npc-left { flex: 1; min-width: 300px; }
.npc-right { flex: 2; min-width: 400px; }
/* NPC header */
.npc-header, .zones-header {
background-color: #3C3C3C !important;
color: #E6C98B !important;
font-weight: bold;
text-align: center;
padding: 6px;
margin: 0;
border-bottom: 2px solid #D6B25E !important;
}
/* NPC box & image */
.npc-box {
border: 1px solid #3C3C3C !important;
border-radius: 4px;
padding: 10px !important;
}
.npc-image { text-align: center; margin-bottom: 8px !important; }
/* NPC tables */
.npc-table, table.info-table, table.npc-zone-table, .exp-camp-table {
width: 100% !important;
border-collapse: collapse !important;
background-color: #242428 !important;
color: #D6D6C9 !important;
}
.npc-table td, table.info-table td, table.npc-zone-table td, .exp-camp-table td {
padding: 4-6px !important;
border: 1px solid #3C3C3C !important;
background-color: #242428 !important;
color: #D6D6C9 !important;
}
/* Info table stripes */
table.info-table tr:nth-child(odd) td:last-child { background: #242428 !important; }
table.info-table tr:nth-child(even) td:last-child { background: #2E2E31 !important; }
table.info-table tr td:first-child { background: #3C3C3C !important; font-weight: bold; }
/* NPC zone table stripes */
table.npc-zone-table tr:nth-child(odd):not(:first-child) { background: #242428 !important; }
table.npc-zone-table tr:nth-child(even):not(:first-child) { background: #2E2E31 !important; }
/* NPC Name / Infobox */
.infobox { border: 4px solid #555 !important; border-radius: 6px; }
.npcname-header, .infobox .npcname-row td {
background-color: #2B2B2B !important;
color: #E6C98B !important;
text-align: center;
border: 2px solid #D6B25E !important;
font-weight: bold;
padding: 6px;
}
/* EXP Camp unified */
.exp-camp-wrapper { text-align: center; }
.exp-camp-table th {
background-color: #2B2B2B !important;
color: #E6C98B !important;
border: 1px solid #D6B25E !important;
}
.exp-camp-row:nth-child(odd) td { background: #242428 !important; }
.exp-camp-row:nth-child(even) td { background: #2E2E31 !important; }
/* Quest-right first paragraph fix */
.quest-right > div > p:first-child,
.quest-right p:first-of-type {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* -------------------------
MISC CLEANUP
------------------------- */
#content, #column-content { margin-left: 240px !important; padding-top: 0 !important; }
#p-logo { width: 220px !important; position: absolute !important; top: 0; left: 0; z-index: 9999; }
.cm-tabs input[type="radio"] { display: none; }
.cm-tabs .cm-tab-content { display: none; padding: 16px; border-top: 1px solid #3C3C3C; background: #242428; color: #D6D6C9; }
.cm-tabs #tab-archetype:checked ~ .cm-archetype,
.cm-tabs #tab-class:checked ~ .cm-class { display: block; }
.cm-tabs .tab-label { padding: 8px 16px; background: #3C3C3C; border-right: 1px solid #D6B25E; color: #E6C98B; cursor: pointer; display: inline-block; }
.cm-tabs .tab-label:hover { background: #2E2E31; }
/* Force sidebar & content layout */
#column-one, #mw-panel { float: left; width: 220px !important; box-sizing: border-box; }
#content, #column-content, #mw-content-text { margin-left: 240px !important; position: relative !important; }
/* Everything else inherits NPC color scheme automatically */