Main Page: Difference between revisions
No edit summary |
No edit summary Tag: Reverted |
||
| Line 1: | Line 1: | ||
/* | |||
* 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); | |||
} | |||
#mw-page-base, | |||
#mw-head-base, | |||
#mw-head, | |||
#mw-navigation { | |||
background: var(--wiz-panel-background); | |||
} | |||
#mw-head { | |||
border-bottom: 1px solid var(--wiz-content-border); | |||
} | |||
#right-navigation { | |||
border-bottom: 0; | |||
margin-right: var(--wiz-page-gutter); | |||
} | |||
#left-navigation { | |||
border-bottom: 0; | |||
margin-left: calc(var(--wiz-sidebar-width) + var(--wiz-sidebar-content-gap)); | |||
} | |||
#p-personal { | |||
right: var(--wiz-page-gutter); | |||
} | |||
#p-search { | |||
margin-right: 0; | |||
} | |||
#mw-panel { | |||
width: var(--wiz-sidebar-width); | |||
background: transparent; | |||
color: var(--wiz-text); | |||
} | |||
#mw-panel .portal, | |||
#mw-panel .vector-menu-portal { | |||
margin-right: 12px; | |||
} | |||
#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); | |||
} | |||
#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); | |||
} | |||
#footer-icons { | |||
position: absolute; | |||
top: 50%; | |||
right: 0; | |||
transform: translateY(-50%); | |||
} | |||
a, | |||
a:visited, | |||
#mw-panel a, | |||
#mw-head a, | |||
#footer a { | |||
color: var(--wiz-link); | |||
} | |||
a:hover, | |||
#mw-panel a:hover, | |||
#mw-head a:hover, | |||
#footer a:hover { | |||
color: #ffd37a; | |||
} | |||
#left-navigation a, | |||
#right-navigation a, | |||
#p-personal a { | |||
color: var(--wiz-link); | |||
} | |||
#left-navigation li, | |||
#right-navigation li, | |||
.vectorTabs li, | |||
.vectorMenu h3 { | |||
background: transparent; | |||
background-image: none; | |||
border: 0; | |||
} | |||
#left-navigation li a, | |||
#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); | |||
} | |||
#left-navigation li:last-child a, | |||
#right-navigation li:last-child a { | |||
border-right: 1px solid var(--wiz-content-border); | |||
} | |||
#left-navigation li.selected a, | |||
#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); | |||
} | |||
#left-navigation li, | |||
#right-navigation li, | |||
#p-search, | |||
.vectorTabs, | |||
.vectorMenu { | |||
border-color: var(--wiz-content-border); | |||
} | |||
#searchInput { | |||
background: rgba(0, 0, 0, 0.3); | |||
border-color: var(--wiz-content-border); | |||
color: var(--wiz-text); | |||
} | |||
#searchInput::placeholder { | |||
color: #b9b3a8; | |||
} | |||
#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; | |||
} | |||
#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; | |||
} | |||
} | |||
Revision as of 02:58, 4 June 2026
/*
* 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); }
- mw-page-base,
- mw-head-base,
- mw-head,
- mw-navigation {
background: var(--wiz-panel-background); }
- mw-head {
border-bottom: 1px solid var(--wiz-content-border); }
- right-navigation {
border-bottom: 0; margin-right: var(--wiz-page-gutter); }
- left-navigation {
border-bottom: 0; margin-left: calc(var(--wiz-sidebar-width) + var(--wiz-sidebar-content-gap)); }
- p-personal {
right: var(--wiz-page-gutter); }
- p-search {
margin-right: 0; }
- mw-panel {
width: var(--wiz-sidebar-width); background: transparent; color: var(--wiz-text); }
- mw-panel .portal,
- mw-panel .vector-menu-portal {
margin-right: 12px; }
- 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); }
- 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); }
- footer-icons {
position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
a, a:visited,
- mw-panel a,
- mw-head a,
- footer a {
color: var(--wiz-link); }
a:hover,
- mw-panel a:hover,
- mw-head a:hover,
- footer a:hover {
color: #ffd37a; }
- left-navigation a,
- right-navigation a,
- p-personal a {
color: var(--wiz-link); }
- left-navigation li,
- right-navigation li,
.vectorTabs li, .vectorMenu h3 { background: transparent; background-image: none; border: 0; }
- left-navigation li a,
- 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); }
- left-navigation li:last-child a,
- right-navigation li:last-child a {
border-right: 1px solid var(--wiz-content-border); }
- left-navigation li.selected a,
- 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); }
- left-navigation li,
- right-navigation li,
- p-search,
.vectorTabs, .vectorMenu { border-color: var(--wiz-content-border); }
- searchInput {
background: rgba(0, 0, 0, 0.3); border-color: var(--wiz-content-border); color: var(--wiz-text); }
- searchInput::placeholder {
color: #b9b3a8; }
- 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; }
- 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; }
}