Main Page

From Wizards and Warlords
Revision as of 02:58, 4 June 2026 by Aurelian (talk | contribs)
Jump to navigation Jump to search

/*

* Wizards & Warlords Vector skin overrides.
* Fresh base: center the wiki and align the content body with the top search.
*/
root {

--wiz-page-width: 1360px; --wiz-sidebar-width: 210px; --wiz-sidebar-content-gap: 0px; --wiz-page-gutter: 24px; --wiz-content-width: calc(var(--wiz-page-width) - var(--wiz-sidebar-width) - var(--wiz-page-gutter)); --wiz-content-padding: 20px; --wiz-content-background: #222; --wiz-panel-background: rgba(15, 15, 15, 0.82); --wiz-page-background: #111; --wiz-content-border: #ff942d; --wiz-text: #d2d2d2; --wiz-link: #ff942d; --wiz-heading: #e7e1d4; }

html { background: var(--wiz-page-background); }

body { position: relative; width: min(100%, var(--wiz-page-width)); margin: 0 auto; background: transparent; color: var(--wiz-text); }

  1. mw-page-base,
  2. mw-head-base,
  3. mw-head,
  4. mw-navigation {

background: var(--wiz-panel-background); }

  1. mw-head {

border-bottom: 1px solid var(--wiz-content-border); }

  1. right-navigation {

border-bottom: 0; margin-right: var(--wiz-page-gutter); }

  1. left-navigation {

border-bottom: 0; margin-left: calc(var(--wiz-sidebar-width) + var(--wiz-sidebar-content-gap)); }

  1. p-personal {

right: var(--wiz-page-gutter); }

  1. p-search {

margin-right: 0; }

  1. mw-panel {

width: var(--wiz-sidebar-width); background: transparent; color: var(--wiz-text); }

  1. mw-panel .portal,
  2. mw-panel .vector-menu-portal {

margin-right: 12px; }

  1. content.mw-body {

box-sizing: border-box; width: var(--wiz-content-width); margin-left: calc(var(--wiz-sidebar-width) + var(--wiz-sidebar-content-gap)); margin-right: var(--wiz-page-gutter); padding: var(--wiz-content-padding); border: 1px solid var(--wiz-content-border); background: var(--wiz-content-background); color: var(--wiz-text); box-shadow: calc(-1 * (var(--wiz-sidebar-width) + var(--wiz-sidebar-content-gap))) 0 0 var(--wiz-panel-background), var(--wiz-page-gutter) 0 0 var(--wiz-panel-background); }

  1. footer {

position: relative; box-sizing: border-box; width: var(--wiz-content-width); margin-left: calc(var(--wiz-sidebar-width) + var(--wiz-sidebar-content-gap)); margin-right: var(--wiz-page-gutter); min-height: 112px; padding-top: 24px; padding-bottom: 24px; background: var(--wiz-panel-background); color: var(--wiz-text); box-shadow: calc(-1 * (var(--wiz-sidebar-width) + var(--wiz-sidebar-content-gap))) 0 0 var(--wiz-panel-background), var(--wiz-page-gutter) 0 0 var(--wiz-panel-background); }

  1. footer-icons {

position: absolute; top: 50%; right: 0; transform: translateY(-50%); }

a, a:visited,

  1. mw-panel a,
  2. mw-head a,
  3. footer a {

color: var(--wiz-link); }

a:hover,

  1. mw-panel a:hover,
  2. mw-head a:hover,
  3. footer a:hover {

color: #ffd37a; }

  1. left-navigation a,
  2. right-navigation a,
  3. p-personal a {

color: var(--wiz-link); }

  1. left-navigation li,
  2. right-navigation li,

.vectorTabs li, .vectorMenu h3 { background: transparent; background-image: none; border: 0; }

  1. left-navigation li a,
  2. right-navigation li a,

.vectorTabs li a, .vectorMenu h3 { background: var(--wiz-panel-background); background-image: none; border: 0; border-left: 1px solid var(--wiz-content-border); color: var(--wiz-link); }

  1. left-navigation li:last-child a,
  2. right-navigation li:last-child a {

border-right: 1px solid var(--wiz-content-border); }

  1. left-navigation li.selected a,
  2. right-navigation li.selected a,

.vectorTabs li.selected a { position: relative; z-index: 2; background: var(--wiz-content-background); background-image: none; border-bottom: 1px solid var(--wiz-content-background); box-shadow: 0 1px 0 var(--wiz-content-background); color: var(--wiz-heading); }

  1. left-navigation li,
  2. right-navigation li,
  3. p-search,

.vectorTabs, .vectorMenu { border-color: var(--wiz-content-border); }

  1. searchInput {

background: rgba(0, 0, 0, 0.3); border-color: var(--wiz-content-border); color: var(--wiz-text); }

  1. searchInput::placeholder {

color: #b9b3a8; }

  1. firstHeading.firstHeading.mw-first-heading {

box-sizing: border-box; display: block !important; height: 40px; margin: 12px 0 8px; padding: 0; border-bottom: 1px solid var(--wiz-content-border); color: var(--wiz-heading); font-size: 32px; font-weight: normal; line-height: 40px; }

body.page-Main_Page #firstHeading.firstHeading.mw-first-heading { font-size: 0; }

body.page-Main_Page #firstHeading.firstHeading.mw-first-heading::before { content: "Wizards and Warlords Wiki"; font-size: 32px; }

  1. bodyContent {

clear: both; display: block; margin: 0; padding: 0; border: 0; }

.wizlords-mainpage-left { box-sizing: border-box; float: left; width: calc(50% - 7.5px); padding-left: 15px; padding-right: 15px; }

.wizlords-mainpage-right { box-sizing: border-box; float: right; width: calc(50% - 7.5px); padding-left: 15px; padding-right: 15px; }

.wizlords-mainpage-clear { clear: both; }

.wizlords-mainpage-left > h2.center, .wizlords-mainpage-right > h2.center { margin: 20px 0 10px; padding: 0; border-bottom: 1px solid var(--wiz-content-border); color: var(--wiz-heading); font-size: 24px; font-weight: normal; line-height: 30px; text-align: center; }

.wizlords-mainpage-left > h2.center .mw-headline, .wizlords-mainpage-right > h2.center .mw-headline { text-decoration: none; }

.wizlords-mainpage-left > h2.center a, .wizlords-mainpage-right > h2.center a { border-bottom: 0; text-decoration: none; }

.wizlords-mainpage-left > .center, .wizlords-mainpage-right > .center, .wizlords-mainpage-items { text-align: center; }

.wizlords-mainpage-left > .center > p, .wizlords-mainpage-right > .center > p { margin: 0 0 10px; }

.wizlords-imagetext { display: inline-block; box-sizing: border-box; width: 100px; min-height: 122px; margin: 5px; vertical-align: top; text-align: center; }

.wizlords-imagetext-image { width: 100px; height: 100px; }

.wizlords-imagetext-image img { display: block; width: 100px; height: 100px; object-fit: contain; border: 0; background: transparent; }

.wizlords-imagetext-text { display: flex; align-items: center; justify-content: center; width: 100px; height: 40px; font-size: 14px; line-height: 1.3; text-align: center; }

.wizlords-wideimagetext { display: inline-block; box-sizing: border-box; width: 200px; margin: 10px 12px; vertical-align: top; text-align: center; }

.wizlords-wideimagetext-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; }

.wizlords-wideimagetext-grid .wizlords-wideimagetext { margin: 0; }

.wizlords-wideimagetext-image { width: 200px; height: 100px; }

.wizlords-wideimagetext-image img { display: block; width: 200px; height: 100px; object-fit: cover; border: 0; background: transparent; }

.wizlords-wideimagetext-text { display: flex; align-items: center; justify-content: center; width: 200px; height: 40px; font-size: 14px; line-height: 1.3; text-align: center; }

.wizlords-useful-links { margin: 8px 0 0 20px; padding: 0; text-align: left; }

.wizlords-useful-links li { margin-bottom: 6px; }

@media (max-width: 700px) { :root { --wiz-sidebar-width: 0px; --wiz-sidebar-content-gap: 0px; --wiz-content-width: 100%; --wiz-page-gutter: 12px; --wiz-content-padding: 14px; }

.wizlords-mainpage-left, .wizlords-mainpage-right { float: none; width: 100%; padding-left: 0; padding-right: 0; }

}