Toggle search
Toggle menu
41
155
1
1.5K
Wizards and Warlords
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Vector.css: Difference between revisions

MediaWiki interface page
More actions
← Older edit
Aurelian (talk | contribs)
Bureaucrats, Interface administrators, Administrators
1,509 edits
No edit summary
No edit summary
 
(103 intermediate revisions by the same user not shown)
Line 1: Line 1:
/*
/*
  * Wizards & Warlords Vector skin overrides.
  * Wizards & Warlords Vector skin overrides.
  * Fresh base: center the wiki and align the content body with the top search.
  *
* 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 {
:root {
--wiz-page-width: 1360px;
--wiz-page-width: 1360px;
--wiz-sidebar-width: 210px;
--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-sidebar-content-gap: 0px;
--wiz-page-gutter: 24px;
--wiz-page-gutter: 24px;
--wiz-content-width: calc(var(--wiz-page-width) - var(--wiz-sidebar-width) - var(--wiz-page-gutter));
--wiz-content-width: calc(100% - var(--wiz-sidebar-width) - var(--wiz-sidebar-content-gap) - var(--wiz-page-gutter));
--wiz-content-padding: 20px;
--wiz-content-padding: 20px;
--wiz-content-background: #222;
--wiz-content-background: #222;
--wiz-panel-solid-background: #0f0f0f;
--wiz-panel-background: rgba(15, 15, 15, 0.82);
--wiz-panel-background: rgba(15, 15, 15, 0.82);
--wiz-page-background: #111;
--wiz-page-background: #111;
--wiz-background-image: url("/index.php/Special:Redirect/file/background_circle.jpeg");
--wiz-content-border: #ff942d;
--wiz-content-border: #ff942d;
--wiz-text: #d2d2d2;
--wiz-text: #d2d2d2;
Line 20: Line 47:
}
}


/* ==========================================================================
  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 {
html {
background: var(--wiz-page-background);
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 {
body {
position: relative;
position: relative;
z-index: 0;
width: min(100%, var(--wiz-page-width));
width: min(100%, var(--wiz-page-width));
min-height: 100vh;
margin: 0 auto;
margin: 0 auto;
background: transparent;
background: transparent;
Line 32: Line 80:
}
}


#mw-page-base,
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-head-base,
#mw-head,
#mw-navigation,
#mw-navigation {
#mw-head {
background: transparent;
background-image: none;
}
 
#mw-panel {
background: var(--wiz-panel-background);
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 {
#right-navigation {
border-bottom: 1px solid var(--wiz-content-border);
border-bottom: 0;
margin-right: var(--wiz-page-gutter);
margin-right: var(--wiz-page-gutter);
}
}


#left-navigation {
#left-navigation {
border-bottom: 1px solid var(--wiz-content-border);
border-bottom: 0;
margin-left: calc(var(--wiz-sidebar-width) + var(--wiz-sidebar-content-gap));
margin-left: calc(var(--wiz-sidebar-width) + var(--wiz-sidebar-content-gap));
}
}
Line 57: Line 182:
}
}


/* ==========================================================================
  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 {
#mw-panel {
width: var(--wiz-sidebar-width);
width: var(--wiz-sidebar-width);
background: transparent;
background: transparent;
color: var(--wiz-text);
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);
}
}


Line 68: Line 215:
}
}


/* ==========================================================================
  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 {
#content.mw-body {
box-sizing: border-box;
box-sizing: border-box;
Line 78: Line 232:
color: var(--wiz-text);
color: var(--wiz-text);
box-shadow:
box-shadow:
calc(-1 * (var(--wiz-sidebar-width) + var(--wiz-sidebar-content-gap))) 0 0 var(--wiz-panel-background),
calc(-1 * (var(--wiz-sidebar-width) + var(--wiz-sidebar-content-gap))) 0 0 0 var(--wiz-panel-background),
var(--wiz-page-gutter) 0 0 var(--wiz-panel-background);
var(--wiz-page-gutter) 0 0 0 var(--wiz-panel-background);
}
}


Line 94: Line 248:
color: var(--wiz-text);
color: var(--wiz-text);
box-shadow:
box-shadow:
calc(-1 * (var(--wiz-sidebar-width) + var(--wiz-sidebar-content-gap))) 0 0 var(--wiz-panel-background),
calc(-1 * (var(--wiz-sidebar-width) + var(--wiz-sidebar-content-gap))) 0 0 0 var(--wiz-panel-background),
var(--wiz-page-gutter) 0 0 var(--wiz-panel-background);
var(--wiz-page-gutter) 0 0 0 var(--wiz-panel-background);
}
}


Line 105: Line 259:
}
}


/* ==========================================================================
  Link Colours
  --------------------------------------------------------------------------
  Global link colour rules for content, sidebar, header, and footer.
  ========================================================================== */
a,
a,
a:visited,
a:visited,
Line 126: Line 285:
}
}


/* ==========================================================================
  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,
#left-navigation li,
#right-navigation li,
#right-navigation li,
Line 133: Line 299:
background-image: none;
background-image: none;
border: 0;
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;
}
}


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


#left-navigation li.selected,
#left-navigation li a span,
#right-navigation li.selected,
#right-navigation li a span,
.vectorTabs li.selected {
.vectorTabs li a span,
position: relative;
.vectorMenu h3 span {
top: 1px;
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,
#left-navigation li.selected a,
#right-navigation li.selected a,
#right-navigation li.selected a,
.vectorTabs li.selected a {
.vectorTabs li.selected a {
position: relative;
z-index: 2;
background: var(--wiz-content-background);
background: var(--wiz-content-background);
background-image: none;
background-image: none;
border-bottom: 1px solid var(--wiz-content-border);
color: var(--wiz-heading);
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,
#left-navigation li,
#right-navigation li,
#right-navigation li,
Line 171: Line 464:
#searchInput {
#searchInput {
background: rgba(0, 0, 0, 0.3);
background: rgba(0, 0, 0, 0.3);
border-color: var(--wiz-content-border);
border-color: var(--wiz-race-table-border-colour, #4d4d4d);
color: var(--wiz-text);
color: var(--wiz-text);
}
}
Line 179: Line 472:
}
}


/* ==========================================================================
  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 {
#firstHeading.firstHeading.mw-first-heading {
box-sizing: border-box;
box-sizing: border-box;
Line 207: Line 506:
padding: 0;
padding: 0;
border: 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 {
.wizlords-mainpage-left {
box-sizing: border-box;
box-sizing: border-box;
Line 229: Line 842:
}
}


/* Homepage section headings. */
.wizlords-mainpage-left > h2.center,
.wizlords-mainpage-left > h2.center,
.wizlords-mainpage-right > h2.center {
.wizlords-mainpage-right > h2.center {
Line 263: Line 877:
}
}


/* 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 {
.wizlords-imagetext {
display: inline-block;
display: inline-block;
Line 298: Line 949:
}
}


/* ==========================================================================
  Homepage Wide Image Links
  --------------------------------------------------------------------------
  Used for 200x100 banner-style image links, such as Weekly Battle Games,
  World Lore, and Events.
  ========================================================================== */
.wizlords-wideimagetext {
.wizlords-wideimagetext {
display: inline-block;
display: inline-block;
Line 343: Line 1,000:
}
}


.wizlords-useful-links {
/* ==========================================================================
  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;
margin: 8px 0 0 20px;
padding: 0;
padding-left: 20px;
list-style: disc inside;
text-align: left;
text-align: left;
}
}


.wizlords-useful-links li {
.wizlords-useful-links li,
.wizlords-mainpage-link-list li,
.wizlords-mainpage-whatislarp-list li {
margin-bottom: 6px;
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;
}
}


@media (max-width: 700px) {
#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 {
:root {
--wiz-sidebar-width: 0px;
--wiz-sidebar-width: 0px;
--wiz-sidebar-content-gap: 0px;
--wiz-sidebar-content-gap: 0px;
--wiz-content-width: 100%;
--wiz-content-width: calc(100% - var(--wiz-page-gutter) - var(--wiz-page-gutter));
--wiz-page-gutter: 12px;
--wiz-page-gutter: 12px;
--wiz-content-padding: 14px;
--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);
}
}


Line 370: Line 1,130:
}
}


}
/* ==========================================================================
  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;
}
}
Retrieved from "https://wizlords.wiki/MediaWiki:Vector.css"