MediaWiki:Vector.css: Difference between revisions
MediaWiki interface page
More actions
No edit summary Tag: Reverted |
No edit summary |
||
| (7 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* | /* | ||
* Wizards & Warlords | * 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. | |||
*/ | */ | ||
| Line 12: | Line 15: | ||
Phone: 0-599px; tablet / large phone: 600-899px; small desktop / | Phone: 0-599px; tablet / large phone: 600-899px; small desktop / | ||
landscape tablet: 900-1199px; full desktop: 1200px+. | 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-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-content-background: #222; | ||
--wiz-panel-solid-background: #0f0f0f; | --wiz-panel-solid-background: #0f0f0f; | ||
--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; | ||
--wiz-link: #ff942d; | --wiz-link: #ff942d; | ||
--wiz-heading: #e7e1d4; | --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); | color: var(--wiz-text); | ||
} | } | ||
body::before { | |||
background- | 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- | .skin-vector .page-banner-desktop { | ||
display: block !important; | |||
} | } | ||
.skin- | .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 | |||
margin- | -------------------------------------------------------------------------- | ||
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%; | 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; | box-sizing: border-box; | ||
margin- | width: var(--wiz-content-width); | ||
margin- | margin-left: calc(var(--wiz-sidebar-width) + var(--wiz-sidebar-content-gap)); | ||
padding-top: | margin-right: var(--wiz-page-gutter); | ||
padding-bottom: | padding: var(--wiz-content-padding); | ||
border: 1px solid var(--wiz-content-border); | |||
background- | 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; | box-sizing: border-box; | ||
width: | width: 32px; | ||
height: 40px; | |||
padding: 0 | padding-top: 16.25px; | ||
padding-right: 0; | |||
background- | 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; | 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); | 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 | 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; | |||
display: | 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; | 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; | box-sizing: border-box; | ||
width: | 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; | min-width: 0; | ||
padding: 12px 16px; | |||
} | |||
#content.mw-body #bodyContent #toc .toctitle { | |||
margin: 0 0 10px; | |||
color: var(--wiz-text); | |||
text-align: center; | text-align: center; | ||
} | } | ||
. | #content.mw-body | ||
#bodyContent | |||
height: | #toc:has(.toctogglecheckbox:checked) | ||
.toctitle { | |||
margin: 0; | |||
line-height: 1.4; | |||
} | } | ||
. | #content.mw-body #bodyContent #toc .toctitle h2 { | ||
display: | display: inline; | ||
margin: 0; | |||
padding: 0; | |||
border: 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); | |||
color: var(--wiz- | |||
font-size: 12px; | font-size: 12px; | ||
} | } | ||
. | #content.mw-body #bodyContent #toc .toctoggle a { | ||
color: var(--wiz-link); | color: var(--wiz-link); | ||
text-decoration: none; | 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; | float: none; | ||
width: 100%; | 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; | |||
} | } | ||