MediaWiki:Vector.css
Jump to navigation
Jump to search
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)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/*
* Wizards & Warlords Vector skin overrides.
*
* This file controls the Vector desktop shell, dark theme, top tabs, sidebar,
* page title, footer, and desktop homepage layout.
*
* Some article typography remains below as a temporary compatibility copy.
* Common.css now contains lower-specificity shared equivalents; retaining the
* existing Vector selectors keeps the desktop cascade visually unchanged.
*/
/* ==========================================================================
Responsive Layout Standard
--------------------------------------------------------------------------
Phone: 0-599px; tablet / large phone: 600-899px; small desktop /
landscape tablet: 900-1199px; full desktop: 1200px+.
Vector remains the desktop skin, but its narrow-window fallback follows the
same viewport boundaries as the rest of the project.
========================================================================== */
/* ==========================================================================
Theme And Layout Variables
--------------------------------------------------------------------------
Change these first when adjusting the overall site width, sidebar width,
colours, background image, content padding, or logo size.
========================================================================== */
:root {
--wiz-page-width: 1360px;
--wiz-sidebar-width: 210px;
--wiz-sidebar-left-inset: 8px;
--wiz-sidebar-right-inset: 8px;
--wiz-logo-size: 150px;
--wiz-logo-edge-space: calc((var(--wiz-sidebar-width) - var(--wiz-sidebar-left-inset) - var(--wiz-sidebar-right-inset) - var(--wiz-logo-size)) / 2);
--wiz-sidebar-content-gap: 0px;
--wiz-page-gutter: 24px;
--wiz-content-width: calc(100% - var(--wiz-sidebar-width) - var(--wiz-sidebar-content-gap) - var(--wiz-page-gutter));
--wiz-content-padding: 20px;
--wiz-content-background: #222;
--wiz-panel-solid-background: #0f0f0f;
--wiz-panel-background: rgba(15, 15, 15, 0.82);
--wiz-page-background: #111;
--wiz-background-image: url("/index.php/Special:Redirect/file/background_circle.jpeg");
--wiz-content-border: #ff942d;
--wiz-text: #d2d2d2;
--wiz-link: #ff942d;
--wiz-heading: #e7e1d4;
}
/* ==========================================================================
Full Page Background
--------------------------------------------------------------------------
The background image is attached to the whole browser viewport. The image
keeps its aspect ratio and crops instead of stretching or skewing.
========================================================================== */
html {
min-height: 100%;
background-color: var(--wiz-page-background);
background-image: var(--wiz-background-image);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
}
/* ==========================================================================
Centered Wiki Shell And Panel Tint
--------------------------------------------------------------------------
The body is the centered 1360px wiki shell. The body::before layer paints
the transparent sidebar, right gutter, and header tint without stacking
multiple semi-transparent Vector wrappers on top of each other.
========================================================================== */
body {
position: relative;
z-index: 0;
width: min(100%, var(--wiz-page-width));
min-height: 100vh;
margin: 0 auto;
background: transparent;
color: var(--wiz-text);
}
body::before {
content: "";
position: fixed;
z-index: -1;
top: 0;
left: 50%;
width: min(100%, var(--wiz-page-width));
height: 79px;
transform: translateX(-50%);
pointer-events: none;
background: linear-gradient(
to right,
var(--wiz-panel-background) 0,
var(--wiz-panel-background) calc(var(--wiz-sidebar-width) + var(--wiz-sidebar-content-gap)),
var(--wiz-panel-background) calc(100% - var(--wiz-page-gutter)),
var(--wiz-panel-background) calc(100% - var(--wiz-page-gutter)),
var(--wiz-panel-background) 100%
);
}
/* Vector always uses the wide Main Page banner, including when its desktop
shell is viewed through a narrow browser window. Citizen retains the
responsive no-background banner swap defined in its own stylesheet. */
.skin-vector .page-banner {
aspect-ratio: auto;
margin-bottom: 24px;
background-image: none;
}
.skin-vector .page-banner-desktop {
display: block !important;
}
.skin-vector .page-banner-mobile {
display: none !important;
}
/* ==========================================================================
Vector Wrapper Cleanup
--------------------------------------------------------------------------
Vector has several overlapping header/sidebar wrappers. These rules remove
their default backgrounds, gradients, shadows, and borders so our single
body::before tint layer is the only panel background.
========================================================================== */
#mw-page-base {
background: transparent;
}
#mw-head-base,
#mw-navigation,
#mw-head {
background: transparent;
background-image: none;
}
#mw-panel {
background: var(--wiz-panel-background);
background-image: none;
}
#mw-head {
border-bottom: 0;
background-image: none;
}
#mw-head-base {
border-bottom: 0;
box-shadow: none;
outline: 0;
opacity: 1;
}
#mw-head-base::before,
#mw-head-base::after {
content: none;
display: none;
}
/* ==========================================================================
Header Navigation Alignment
--------------------------------------------------------------------------
These align the left page tabs, right action tabs, login links, and search
box with the content area and right gutter.
========================================================================== */
#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;
}
/* ==========================================================================
Sidebar And Logo
--------------------------------------------------------------------------
The sidebar panel is 210px wide. The logo is centered inside the usable
sidebar area after accounting for the small left/right inset.
========================================================================== */
#mw-panel {
width: var(--wiz-sidebar-width);
background: transparent;
color: var(--wiz-text);
}
#p-logo {
top: 0;
left: var(--wiz-sidebar-left-inset);
width: calc(var(--wiz-sidebar-width) - var(--wiz-sidebar-left-inset) - var(--wiz-sidebar-right-inset));
height: calc(var(--wiz-logo-size) + var(--wiz-sidebar-left-inset) + var(--wiz-logo-edge-space));
margin: 0;
}
#p-logo a {
display: block;
width: 100%;
height: 100%;
background-position: center calc(var(--wiz-sidebar-left-inset) + var(--wiz-logo-edge-space));
background-size: var(--wiz-logo-size) var(--wiz-logo-size);
}
#mw-panel .portal,
#mw-panel .vector-menu-portal {
margin-right: 12px;
}
/* ==========================================================================
Content And Footer Shell
--------------------------------------------------------------------------
The content and footer share the same width and left/right alignment. The
content gets the solid dark background; the footer uses the transparent
panel tint.
========================================================================== */
#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 0 var(--wiz-panel-background),
var(--wiz-page-gutter) 0 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 0 var(--wiz-panel-background),
var(--wiz-page-gutter) 0 0 0 var(--wiz-panel-background);
}
#footer-icons {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
/* ==========================================================================
Link Colours
--------------------------------------------------------------------------
Global link colour rules for content, sidebar, header, and footer.
========================================================================== */
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);
}
/* ==========================================================================
Top Tabs And Vector Menu Resets
--------------------------------------------------------------------------
These rules restyle the Vector page/action tabs. Inactive tabs are
transparent so they blend into the header. Selected tabs match the content
background and use a small cover strip to hide the bottom border cleanly.
========================================================================== */
#left-navigation li,
#right-navigation li,
.vectorTabs li,
.vectorMenu h3 {
background: transparent;
background-image: none;
border: 0;
}
#p-namespaces .vector-menu-content,
#p-namespaces .vector-menu-content-list {
margin-left: 0;
padding-left: 0;
}
#p-namespaces {
padding-left: 0;
}
#left-navigation li::before,
#left-navigation li::after,
#right-navigation li::before,
#right-navigation li::after,
.vectorTabs li::before,
.vectorTabs li::after,
.vectorMenu h3::before,
.vectorMenu h3::after {
background: none;
background-image: none;
border: 0;
box-shadow: none;
content: none;
}
#left-navigation li a,
#right-navigation li a,
.vectorTabs li a,
.vectorMenu h3 {
background: transparent;
background-image: none;
border: 0;
border-left: 1px solid var(--wiz-content-border);
border-bottom: 1px solid var(--wiz-content-border);
color: var(--wiz-link);
}
#left-navigation li a span,
#right-navigation li a span,
.vectorTabs li a span,
.vectorMenu h3 span {
background: transparent;
background-image: none;
}
#left-navigation .vectorTabs,
#right-navigation .vectorTabs,
#left-navigation .vector-menu-tabs,
#right-navigation .vector-menu-tabs,
#left-navigation .vector-menu-tabs-legacy,
#right-navigation .vector-menu-tabs-legacy,
#left-navigation .vectorTabs ul,
#right-navigation .vectorTabs ul,
#left-navigation .vector-menu-tabs ul,
#right-navigation .vector-menu-tabs ul,
#left-navigation .vectorTabs span,
#right-navigation .vectorTabs span,
#left-navigation .vector-menu-tabs span,
#right-navigation .vector-menu-tabs span,
#left-navigation .vectorTabs li,
#right-navigation .vectorTabs li,
#left-navigation .vector-menu-tabs li,
#right-navigation .vector-menu-tabs li,
#left-navigation .vectorTabs li a,
#right-navigation .vectorTabs li a,
#left-navigation .vector-menu-tabs li a,
#right-navigation .vector-menu-tabs li a,
#right-navigation .vectorMenu,
#right-navigation .vectorMenu h3,
#right-navigation .vectorMenu h3 span,
#right-navigation .vector-menu-heading,
#right-navigation .vector-menu-heading span,
#right-navigation .vector-menu-heading-label,
#p-cactions-label,
#p-cactions-label span {
background-image: none !important;
background: transparent;
box-shadow: none;
}
#left-navigation li:last-child a,
#right-navigation li:last-child a {
border-right: 1px solid var(--wiz-content-border);
}
/* The watch/unwatch star has different Vector sizing, so it is normalised here. */
#ca-watch a,
#ca-unwatch a {
box-sizing: border-box;
width: 32px;
height: 40px;
padding-top: 16.25px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
background-position: center center;
line-height: 18px;
}
#ca-watch,
#ca-unwatch {
height: 40px;
line-height: 18px;
}
#right-navigation li.mw-watchlink.icon {
top: auto;
margin: 0;
padding: 0;
line-height: inherit;
}
#right-navigation li.mw-watchlink.icon a {
margin: 0;
line-height: inherit;
}
#ca-watch a span,
#ca-unwatch a span {
position: absolute;
overflow: hidden;
width: 1px;
height: 1px;
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap;
}
/* Selected tabs visually open into the content area below. */
#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-border);
color: var(--wiz-heading);
}
#left-navigation li.selected a::after,
#right-navigation li.selected a::after,
.vectorTabs li.selected a::after {
content: "";
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 1px;
background: var(--wiz-content-background);
pointer-events: none;
}
/* Shared border colour for the tab row. */
#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-race-table-border-colour, #4d4d4d);
color: var(--wiz-text);
}
#searchInput::placeholder {
color: #b9b3a8;
}
/* ==========================================================================
Page Title And Body Content
--------------------------------------------------------------------------
The first heading sits inside the content area with its own spacing. On the
main page only, "Main Page" is visually replaced with the wiki title.
========================================================================== */
#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;
font-size: 14px;
line-height: 1.6;
}
/* Normal article lists generated by * and # wikitext. */
#content.mw-body #bodyContent .mw-parser-output > ul,
#content.mw-body #bodyContent .mw-parser-output > ol {
margin: 8px 0 12px 28px;
padding-left: 20px;
text-align: left;
}
#content.mw-body #bodyContent .mw-parser-output > ul {
list-style: disc outside;
}
#content.mw-body #bodyContent .mw-parser-output ul ul {
margin: 4px 0 6px 22px;
padding-left: 18px;
list-style: disc outside;
}
#content.mw-body #bodyContent .mw-parser-output > ol {
list-style: decimal outside;
}
#content.mw-body #bodyContent .mw-parser-output > ul > li,
#content.mw-body #bodyContent .mw-parser-output > ol > li {
display: list-item;
margin-bottom: 4px;
}
#content.mw-body #bodyContent .mw-parser-output ul ul > li {
display: list-item;
margin-bottom: 3px;
list-style: disc outside;
}
#content.mw-body #bodyContent .mw-parser-output li::marker {
color: var(--wiz-text);
}
/* ==========================================================================
Inline Article Table Of Contents
--------------------------------------------------------------------------
Style Vector's generated #toc directly so it retains the established floated
desktop appearance and allows article content to wrap beside it.
========================================================================== */
#content.mw-body #bodyContent #toc {
float: right;
clear: right;
box-sizing: border-box;
width: max-content;
min-width: 220px;
max-width: 320px;
margin: 0 0 16px 24px;
padding: 16px 24px;
border: 1px solid var(--wiz-content-border);
background: var(--wiz-panel-solid-background);
color: var(--wiz-text);
font-size: 0.95em;
}
#content.mw-body #bodyContent #toc:has(.toctogglecheckbox:checked) {
width: fit-content;
min-width: 0;
padding: 12px 16px;
}
#content.mw-body #bodyContent #toc .toctitle {
margin: 0 0 10px;
color: var(--wiz-text);
text-align: center;
}
#content.mw-body
#bodyContent
#toc:has(.toctogglecheckbox:checked)
.toctitle {
margin: 0;
line-height: 1.4;
}
#content.mw-body #bodyContent #toc .toctitle h2 {
display: inline;
margin: 0;
padding: 0;
border: 0;
color: var(--wiz-text);
font-family: inherit;
font-size: 14px;
font-weight: bold;
line-height: 1.4;
}
#content.mw-body #bodyContent #toc .toctoggle {
color: var(--wiz-text);
font-size: 12px;
}
#content.mw-body #bodyContent #toc .toctoggle a {
color: var(--wiz-link);
text-decoration: none;
}
#content.mw-body #bodyContent #toc ul {
margin: 0;
padding: 0;
list-style: none;
}
#content.mw-body #bodyContent #toc li {
display: block;
margin: 0;
padding: 0;
list-style: none;
line-height: 1.35;
}
#content.mw-body #bodyContent #toc > ul > li {
padding: 2px 0;
}
#content.mw-body #bodyContent #toc li ul {
margin: 0 0 0 12px;
padding: 0 0 0 10px;
border-left: 1px dotted var(--wiz-content-border);
}
#content.mw-body #bodyContent #toc li li {
margin: 0;
padding: 2px 0;
border-left: 0;
}
#content.mw-body #bodyContent #toc li::marker {
content: "";
}
#content.mw-body #bodyContent #toc .tocnumber {
display: none;
}
#content.mw-body #bodyContent #toc a {
color: var(--wiz-link);
text-decoration: none;
overflow-wrap: anywhere;
}
#content.mw-body #bodyContent #toc a:hover {
color: #ffd37a;
text-decoration: none;
}
#content.mw-body #bodyContent #toc .toclevel-3,
#content.mw-body #bodyContent #toc .toclevel-4,
#content.mw-body #bodyContent #toc .toclevel-5,
#content.mw-body #bodyContent #toc .toclevel-6 {
display: none !important;
}
/* Article section headings generated by == through ====== wikitext. */
#content.mw-body #bodyContent .mw-heading {
box-sizing: border-box;
margin: 20px 0 10px;
padding: 0;
border-bottom: 0;
color: var(--wiz-heading);
text-align: left;
text-decoration: none;
}
#content.mw-body #bodyContent .mw-heading2 {
height: 30px;
margin-top: 21px;
margin-bottom: 5px;
border-bottom: 1px solid var(--wiz-content-border);
}
#content.mw-body #bodyContent .mw-heading3 {
height: 28px;
margin-top: 5px;
margin-bottom: 10px;
padding-top: 8px;
}
#content.mw-body #bodyContent .mw-heading4 {
height: 23px;
margin-top: 4px;
margin-bottom: 10px;
padding-top: 7px;
}
#content.mw-body #bodyContent .mw-heading h2,
#content.mw-body #bodyContent .mw-heading h3,
#content.mw-body #bodyContent .mw-heading h4,
#content.mw-body #bodyContent .mw-heading h5,
#content.mw-body #bodyContent .mw-heading h6 {
margin: 0;
padding: 0;
border-bottom: 0;
color: var(--wiz-heading);
text-align: left;
text-decoration: none;
}
#content.mw-body #bodyContent .mw-heading h2 {
font-weight: normal;
}
#content.mw-body #bodyContent .mw-heading h3,
#content.mw-body #bodyContent .mw-heading h4,
#content.mw-body #bodyContent .mw-heading h5,
#content.mw-body #bodyContent .mw-heading h6 {
font-weight: bold;
}
#content.mw-body #bodyContent > h2:not(.center) {
box-sizing: border-box;
height: 30px;
margin: 21px 0 5px;
padding: 0;
border-bottom: 1px solid var(--wiz-content-border);
color: var(--wiz-heading);
font-weight: normal;
text-align: left;
text-decoration: none;
}
#content.mw-body #bodyContent > h3:not(.center),
#content.mw-body #bodyContent > h4:not(.center),
#content.mw-body #bodyContent > h5:not(.center),
#content.mw-body #bodyContent > h6:not(.center) {
box-sizing: border-box;
margin: 20px 0 10px;
padding: 0;
border-bottom: 0;
color: var(--wiz-heading);
font-weight: bold;
text-align: left;
text-decoration: none;
}
#content.mw-body #bodyContent > h3:not(.center) {
height: 28px;
margin-top: 5px;
padding-top: 8px;
}
#content.mw-body #bodyContent > h4:not(.center) {
height: 23px;
margin-top: 4px;
padding-top: 7px;
}
#content.mw-body #bodyContent .mw-heading h2,
#content.mw-body #bodyContent > h2:not(.center) {
font-size: 24px;
line-height: 30px;
}
#content.mw-body #bodyContent .mw-heading h3,
#content.mw-body #bodyContent > h3:not(.center) {
font-size: 18px;
line-height: 24px;
}
#content.mw-body #bodyContent .mw-heading h4,
#content.mw-body #bodyContent > h4:not(.center) {
font-size: 14px;
line-height: 1.6;
}
#content.mw-body #bodyContent .mw-heading h5,
#content.mw-body #bodyContent .mw-heading h6,
#content.mw-body #bodyContent > h5:not(.center),
#content.mw-body #bodyContent > h6:not(.center) {
font-size: 15px;
line-height: 21px;
}
#content.mw-body #bodyContent .mw-heading .mw-headline,
#content.mw-body #bodyContent > h2:not(.center) .mw-headline,
#content.mw-body #bodyContent > h3:not(.center) .mw-headline,
#content.mw-body #bodyContent > h4:not(.center) .mw-headline,
#content.mw-body #bodyContent > h5:not(.center) .mw-headline,
#content.mw-body #bodyContent > h6:not(.center) .mw-headline,
#content.mw-body #bodyContent .mw-heading a,
#content.mw-body #bodyContent > h2:not(.center) a,
#content.mw-body #bodyContent > h3:not(.center) a,
#content.mw-body #bodyContent > h4:not(.center) a,
#content.mw-body #bodyContent > h5:not(.center) a,
#content.mw-body #bodyContent > h6:not(.center) a {
border-bottom: 0;
color: var(--wiz-heading);
text-decoration: none;
}
#content.mw-body #bodyContent .mw-heading .mw-editsection {
color: var(--wiz-link);
font-size: 12px;
line-height: 1;
text-decoration: none;
}
#content.mw-body #bodyContent .mw-heading .mw-editsection a {
color: var(--wiz-link);
text-decoration: none;
}
/* ==========================================================================
Homepage Two-Column Layout
--------------------------------------------------------------------------
Homepage sections are arranged as:
left block, right block, clear; then repeat for each row.
========================================================================== */
.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;
}
/* Homepage section headings. */
.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;
}
/* Normal text lists inside homepage blocks. */
.wizlords-mainpage-left > ul,
.wizlords-mainpage-right > ul,
.wizlords-mainpage-left > .center > ul,
.wizlords-mainpage-right > .center > ul {
margin: 8px 0 0 20px;
padding-left: 20px;
list-style: disc inside;
text-align: left;
}
.wizlords-mainpage-left > ol,
.wizlords-mainpage-right > ol,
.wizlords-mainpage-left > .center > ol,
.wizlords-mainpage-right > .center > ol {
margin: 8px 0 0 20px;
padding-left: 20px;
list-style: decimal inside;
text-align: left;
}
.wizlords-mainpage-left li,
.wizlords-mainpage-right li {
display: list-item;
margin-bottom: 6px;
}
.wizlords-mainpage-left li::marker,
.wizlords-mainpage-right li::marker {
color: var(--wiz-text);
}
/* ==========================================================================
Homepage Square Image Links
--------------------------------------------------------------------------
Used for 100x100 icon links with a fixed-height text label underneath.
========================================================================== */
.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;
}
/* ==========================================================================
Homepage Wide Image Links
--------------------------------------------------------------------------
Used for 200x100 banner-style image links, such as Weekly Battle Games,
World Lore, and Events.
========================================================================== */
.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;
}
/* ==========================================================================
Useful Links List
--------------------------------------------------------------------------
Specific list styling for the external/useful links block.
========================================================================== */
.wizlords-useful-links,
.wizlords-mainpage-link-list,
.wizlords-mainpage-whatislarp-list {
margin: 8px 0 0 20px;
padding-left: 20px;
list-style: disc inside;
text-align: left;
}
.wizlords-useful-links li,
.wizlords-mainpage-link-list li,
.wizlords-mainpage-whatislarp-list li {
margin-bottom: 6px;
display: list-item;
list-style: disc inside;
}
.wizlords-useful-links li::marker,
.wizlords-mainpage-link-list li::marker,
.wizlords-mainpage-whatislarp-list li::marker {
color: var(--wiz-text);
}
/* What is LARP includes longer explanatory list items. Align its bullet edge
with the paragraph above instead of using the narrower Useful Links inset. */
#content.mw-body
#bodyContent
.mw-parser-output
.wizlords-mainpage-right
> ul.wizlords-mainpage-whatislarp-list,
#content.mw-body
#bodyContent
.mw-parser-output
.wizlords-mainpage-left
> ul.wizlords-mainpage-whatislarp-list {
box-sizing: border-box;
width: 100%;
margin: 8px 0 0;
padding-left: 18px;
list-style: disc outside;
text-align: left;
}
#content.mw-body
#bodyContent
.mw-parser-output
.wizlords-mainpage-whatislarp-list
> li {
margin-left: 0;
list-style: disc outside;
}
/* Vector assigns separate colours to external and visited links. Keep the
shared homepage navigation-list component consistently orange. */
#content.mw-body .wizlords-mainpage-link-list a,
#content.mw-body .wizlords-mainpage-link-list a:visited,
#content.mw-body .wizlords-mainpage-link-list a.external,
#content.mw-body .wizlords-mainpage-whatislarp-list a,
#content.mw-body .wizlords-mainpage-whatislarp-list a:visited,
#content.mw-body .wizlords-mainpage-whatislarp-list a.external {
color: var(--wiz-link);
font-weight: normal;
text-decoration: none;
}
#content.mw-body .wizlords-mainpage-link-list a:hover,
#content.mw-body .wizlords-mainpage-link-list a.external:hover,
#content.mw-body .wizlords-mainpage-whatislarp-list a:hover,
#content.mw-body .wizlords-mainpage-whatislarp-list a.external:hover {
color: #ffd37a;
text-decoration: none;
}
/* Vector's external-link indicator is a separate blue background SVG, so it
must be recoloured independently from the anchor text. */
#content.mw-body .wizlords-mainpage-link-list a.external,
#content.mw-body .wizlords-mainpage-whatislarp-list a.external {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23ff942d' d='M6 1h3v3H8V2.71L4.35 6.35l-.7-.7L7.29 2H6V1z'/%3E%3Cpath fill='%23ff942d' d='M2 2h3v1H3v4h4V5h1v3H2V2z'/%3E%3C/svg%3E");
}
#content.mw-body .wizlords-mainpage-link-list a.external:hover,
#content.mw-body .wizlords-mainpage-whatislarp-list a.external:hover {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23ffd37a' d='M6 1h3v3H8V2.71L4.35 6.35l-.7-.7L7.29 2H6V1z'/%3E%3Cpath fill='%23ffd37a' d='M2 2h3v1H3v4h4V5h1v3H2V2z'/%3E%3C/svg%3E");
}
/* ==========================================================================
Narrow Vector Fallback
--------------------------------------------------------------------------
When Vector is manually used below the small-desktop range, remove its
desktop sidebar, reclaim that space, and stack the homepage columns.
========================================================================== */
@media (max-width: 899px) {
:root {
--wiz-sidebar-width: 0px;
--wiz-sidebar-content-gap: 0px;
--wiz-content-width: calc(100% - var(--wiz-page-gutter) - var(--wiz-page-gutter));
--wiz-page-gutter: 12px;
--wiz-content-padding: 14px;
}
#mw-panel,
#p-logo {
display: none !important;
}
#content.mw-body,
#footer {
margin-inline: var(--wiz-page-gutter);
box-shadow:
calc(-1 * var(--wiz-page-gutter)) 0 0 0 var(--wiz-panel-background),
var(--wiz-page-gutter) 0 0 0 var(--wiz-panel-background);
}
#left-navigation {
margin-left: var(--wiz-page-gutter);
}
.wizlords-mainpage-left,
.wizlords-mainpage-right {
float: none;
width: 100%;
padding-left: 0;
padding-right: 0;
}
}
/* ==========================================================================
Final What Is LARP List Alignment
--------------------------------------------------------------------------
Vector and shared article styles both assign margins and padding to direct
article lists. This final component-scoped reset guarantees that the What
is LARP bullet edge aligns with the paragraph above, regardless of which
MediaWiki wrapper is present.
========================================================================== */
#content.mw-body #bodyContent ul.wizlords-mainpage-whatislarp-list {
box-sizing: border-box !important;
width: 100% !important;
max-width: none !important;
margin: 8px 0 0 !important;
padding-left: 1.15em !important;
list-style: disc outside !important;
text-align: left !important;
}
#content.mw-body #bodyContent ul.wizlords-mainpage-whatislarp-list > li {
margin-left: 0 !important;
padding-left: 0 !important;
list-style: disc outside !important;
}