MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| (124 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* This | /* | ||
* Wizards & Warlords shared content styling. | |||
* | |||
* This file is loaded by every skin. Keep reusable article typography, | |||
* templates, cards, tables, navboxes, and other content components here. | |||
* Skin shells and navigation belong in the relevant skin stylesheet. | |||
*/ | |||
/* | /* ========================================================================== | ||
/* | Responsive Layout Standard | ||
. | -------------------------------------------------------------------------- | ||
Project-wide layout ranges: | |||
- Phone: 0-599px | |||
- Tablet / large phone: 600-899px | |||
- Small desktop / landscape: 900-1199px | |||
- Full desktop: 1200px+ | |||
Component-specific queries should use these boundaries unless a documented | |||
intrinsic-size constraint requires an additional breakpoint. | |||
========================================================================== */ | |||
/* ========================================================================== | |||
Shared Content Variables | |||
-------------------------------------------------------------------------- | |||
Skin stylesheets may override these tokens, but shared components always | |||
have a stable dark-fantasy fallback. | |||
========================================================================== */ | |||
:root { | |||
--wiz-content-background: #222; | |||
--wiz-panel-solid-background: #0f0f0f; | |||
--wiz-content-border: #ff942d; | |||
--wiz-text: #d2d2d2; | |||
--wiz-link: #ff942d; | |||
--wiz-heading: #e7e1d4; | |||
} | |||
/* ========================================================================== | |||
Shared Article Typography | |||
-------------------------------------------------------------------------- | |||
These selectors are intentionally skin-neutral and lower-specificity than | |||
the current Vector compatibility rules. Vector therefore remains visually | |||
unchanged while Citizen receives the same article rhythm and colours. | |||
========================================================================== */ | |||
.mw-body-content { | |||
color: var(--wiz-text); | |||
font-size: 14px; | |||
line-height: 1.6; | |||
} | } | ||
. | .mw-parser-output > ul, | ||
.mw-parser-output > ol { | |||
margin: 8px 0 12px 28px; | |||
padding-left: 20px; | |||
text-align: left; | |||
} | } | ||
. | .mw-parser-output > ul { | ||
list-style: disc outside; | |||
} | } | ||
. | .mw-parser-output ul ul { | ||
margin: 4px 0 6px 22px; | |||
padding-left: 18px; | |||
list-style: disc outside; | |||
} | } | ||
. | .mw-parser-output > ol { | ||
list-style: decimal outside; | |||
} | } | ||
.mw-parser-output > ul > li, | |||
.mw-parser-output > ol > li { | |||
display: list-item; | |||
. | margin-bottom: 4px; | ||
margin | |||
} | } | ||
. | .mw-parser-output ul ul > li { | ||
display: list-item; | |||
margin-bottom: 3px; | |||
list-style: disc outside; | |||
} | } | ||
. | .mw-parser-output li::marker { | ||
color: var(--wiz-text); | |||
color: var(--wiz-text | |||
} | } | ||
. | /* MediaWiki wraps generated headings in .mw-heading on current versions. */ | ||
. | .mw-parser-output .mw-heading { | ||
box-sizing: border-box; | |||
margin: 20px 0 10px; | |||
margin: 0; | |||
padding: 0; | padding: 0; | ||
border: 0; | border-bottom: 0; | ||
color: var(--wiz- | color: var(--wiz-heading); | ||
text-align: left; | |||
text-decoration: none; | |||
} | } | ||
. | .mw-parser-output .mw-heading2 { | ||
margin-top: 21px; | |||
margin-bottom: 5px; | |||
border-bottom: 1px solid var(--wiz-content-border); | |||
} | } | ||
. | .mw-parser-output .mw-heading3 { | ||
. | margin-top: 5px; | ||
margin-bottom: 10px; | |||
padding-top: 8px; | |||
} | } | ||
. | .mw-parser-output .mw-heading4 { | ||
. | margin-top: 4px; | ||
margin: | margin-bottom: 10px; | ||
padding-top: 7px; | |||
} | } | ||
. | .mw-parser-output .mw-heading h2, | ||
. | .mw-parser-output .mw-heading h3, | ||
.mw-parser-output .mw-heading h4, | |||
.mw-parser-output .mw-heading h5, | |||
.mw-parser-output .mw-heading h6 { | |||
margin: 0; | margin: 0; | ||
padding: 0; | padding: 0; | ||
border-bottom: 0; | |||
color: var(--wiz-heading); | |||
text-align: left; | |||
text-decoration: none; | |||
} | } | ||
. | .mw-parser-output .mw-heading h2 { | ||
. | font-size: 24px; | ||
font-weight: normal; | |||
line-height: 30px; | |||
} | } | ||
. | .mw-parser-output .mw-heading h3 { | ||
. | font-size: 18px; | ||
font-weight: bold; | |||
line-height: 24px; | |||
} | } | ||
. | .mw-parser-output .mw-heading h4 { | ||
font-size: 14px; | |||
font-weight: bold; | |||
line-height: 1.6; | |||
} | } | ||
. | .mw-parser-output .mw-heading h5, | ||
. | .mw-parser-output .mw-heading h6 { | ||
font-size: 15px; | |||
font-weight: bold; | |||
line-height: 21px; | |||
} | } | ||
. | .mw-parser-output .mw-heading .mw-headline, | ||
. | .mw-parser-output .mw-heading a { | ||
color: var(--wiz- | border-bottom: 0; | ||
color: var(--wiz-heading); | |||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
. | .mw-parser-output .mw-heading .mw-editsection, | ||
. | .mw-parser-output .mw-heading .mw-editsection a { | ||
color: | color: var(--wiz-link); | ||
font-size: 12px; | |||
line-height: 1; | |||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
/* | /* Shared homepage navigation-list links. Descriptive text following each link | ||
.wizlords- | remains normal weight because only the anchor itself is emphasized. */ | ||
.wizlords-mainpage-link-list a, | |||
.wizlords-mainpage-whatislarp-list a { | |||
color: var(--wiz-link, #ff942d); | |||
color: var(--wiz- | font-weight: normal; | ||
font- | text-decoration: none; | ||
} | } | ||
.wizlords- | .wizlords-mainpage-link-list a:hover, | ||
.wizlords-mainpage-whatislarp-list a:hover { | |||
color: #ffd37a; | |||
text-decoration: none; | |||
} | } | ||
. | /* Main Page banner. | ||
Desktop/small-desktop uses the full single-line parchment banner. Mobile and | |||
tablet use the transparent no-background version so the header sits cleanly | |||
inside Citizen's narrow layout. */ | |||
.page-banner { | |||
width: 100%; | |||
margin: 0 auto 24px; | |||
text-align: center; | |||
} | } | ||
. | .page-banner-desktop, | ||
.page-banner-mobile { | |||
width: 100%; | |||
} | } | ||
. | .page-banner-desktop { | ||
display: | display: block !important; | ||
} | } | ||
. | .page-banner-mobile { | ||
display: none !important; | |||
} | } | ||
.page-banner figure { | |||
display: block; | |||
width: 100%; | |||
max-width: 100%; | |||
margin: 0 auto; | |||
} | } | ||
. | .page-banner img { | ||
display: block; | |||
width: 100%; | |||
max-width: 100%; | |||
height: auto; | |||
margin: 0 auto; | |||
} | } | ||
. | .page-banner .mw-default-size, | ||
display: | .page-banner .mw-file-description, | ||
.page-banner .mw-file-element { | |||
display: block; | |||
max-width: 100%; | |||
margin-right: auto; | |||
margin-left: auto; | |||
} | } | ||
@media (max-width: 899px) { | |||
. | .page-banner { | ||
aspect-ratio: 300 / 141; | |||
margin-bottom: 0; | |||
background-image: url("/index.php/Special:Redirect/file/Wizlords_banner_nobg.png"); | |||
background-repeat: no-repeat; | |||
background-position: center center; | |||
background-size: contain; | |||
} | |||
.page-banner-desktop { | |||
display: none !important; | |||
} | |||
.page-banner-mobile { | |||
display: none !important; | |||
} | |||
} | } | ||
@media (min-width: 900px) { | |||
.page-banner { | |||
aspect-ratio: auto; | |||
background-image: none; | |||
} | |||
.page-banner-desktop { | |||
display: block !important; | |||
} | } | ||
. | .page-banner-mobile { | ||
display: none !important; | |||
} | |||
} | } | ||
/* Compatibility for an accidental nested-list wrapper on the Main Page: | |||
margin- | * | ||
* <ul> | |||
* <ul class="wizlords-mainpage-whatislarp-list">...</ul> | |||
* </ul> | |||
* | |||
* The outer list otherwise adds a second layer of indentation. The preferred | |||
* markup is still a single classified <ul>. | |||
*/ | |||
.mw-parser-output ul:has(> ul.wizlords-mainpage-whatislarp-list) { | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
list-style: none !important; | |||
} | } | ||
.wizlords- | .mw-parser-output | ||
margin- | ul:has(> ul.wizlords-mainpage-whatislarp-list) | ||
> ul.wizlords-mainpage-whatislarp-list { | |||
margin-left: 0 !important; | |||
} | } | ||
. | /* Hide the content of the TOC when the checkbox is checked. */ | ||
/* stylelint-disable-next-line selector-class-pattern */ | |||
.toctogglecheckbox:checked ~ ul { | |||
display: none; | |||
} | } | ||
. | .wiz-grid { | ||
outline: 5px solid red !important; | |||
} | } | ||
. | .wiz-grid-item { | ||
width: 100%; | |||
} | } | ||
. | .wiz-grid-item img { | ||
display: block; | |||
width: 100%; | |||
height: auto; | |||
border: 0; | |||
background: transparent; | |||
box-shadow: none; | |||
} | } | ||
. | .wiz-grid-text { | ||
margin-top: 8px; | |||
} | } | ||
.wizlords- | /* Intro text shown only while a MediaWiki collapsible section is closed. */ | ||
.wizlords-collapsed-hint { | |||
display: none; | |||
margin: 0; | |||
color: var(--wiz-text, #d2d2d2) | padding: 6px 0 6px; | ||
color: var(--wiz-text, #d2d2d2); | |||
font-style: italic; | |||
} | } | ||
.wizlords- | .wizlords-collapsed-hint-section.mw-collapsed > .wizlords-collapsed-hint { | ||
.wizlords- | display: block; | ||
} | } | ||
.wizlords-collapsed-hint-section:not(.mw-collapsed) > .wizlords-collapsed-hint { | |||
display: none; | |||
} | } | ||
.wizlords-collapsed-hint-section ul { | |||
margin: 6px 0 12px; | |||
padding-left: 28px; | |||
list-style: disc outside; | |||
} | } | ||
.wizlords-collapsed-hint-section li { | |||
display: list-item; | |||
margin: 0 0 3px; | |||
list-style: disc outside; | |||
} | } | ||
.wizlords- | .wizlords-collapsed-hint-section li::marker { | ||
color: var(--wiz- | color: var(--wiz-text, #d2d2d2); | ||
} | } | ||
. | /* Keeps a real wiki heading available for the TOC without showing it on the page. */ | ||
.wizlords- | .wizlords-toc-only-heading { | ||
position: absolute; | |||
width: 1px; | |||
height: 0; | |||
margin: 0; | |||
padding: 0; | |||
overflow: hidden; | |||
clip-path: inset(50%); | |||
} | } | ||
.wizlords- | .wizlords-toc-only-heading .mw-heading, | ||
.wizlords-toc-only-heading h2, | |||
.wizlords-toc-only-heading h3, | |||
.wizlords-toc-only-heading h4 { | |||
height: 0 !important; | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
border: 0 !important; | |||
} | } | ||
.wizlords-toc-only-heading .mw-editsection { | |||
display: none; | |||
} | } | ||
.wizlords- | /* Reusable article sections that can be collapsed to keep long pages compact. */ | ||
.wizlords-collapsible-section { | |||
margin: 18px 0; | |||
padding: 8px 14px; | |||
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d); | |||
background: #1f1e1e; | |||
} | } | ||
.wizlords- | .wizlords-toc-only-heading + .wizlords-collapsible-section { | ||
.wizlords- | margin-top: 10px; | ||
} | } | ||
.wizlords- | .wizlords-collapsible-section:has(+ .wizlords-toc-only-heading) { | ||
margin | margin-bottom: 10px; | ||
} | } | ||
.wizlords- | .wizlords-collapsible-section-title { | ||
padding: 0; | |||
border-bottom: 1px solid var(--wiz-content-border, #ff942d); | |||
color: var(--wiz-heading, #e7e1d4); | |||
font-family: Georgia, 'Times New Roman', serif; | |||
font-size: 24px; | |||
font-weight: normal; | |||
line-height: 30px; | |||
} | } | ||
.wizlords- | .wizlords-collapsible-section .mw-collapsible-content { | ||
padding: 6px 0 0; | |||
} | } | ||
.wizlords- | .wizlords-collapsible-section .mw-collapsible-content > p:first-child { | ||
margin-top: 0; | |||
} | } | ||
.wizlords-collapsible-section .mw-collapsible-content > p:last-child { | |||
margin-bottom: 0; | |||
} | } | ||
.wizlords- | .wizlords-collapsible-section-subheading { | ||
margin: 14px 0 18px; | margin: 14px 0 8px; | ||
font- | color: var(--wiz-heading, #e7e1d4); | ||
font-size: 18px; | |||
font-weight: bold; | |||
line-height: 1.3; | |||
} | } | ||
.wizlords- | .wizlords-collapsible-section-subsubheading { | ||
margin: 12px 0 6px; | |||
color: var(--wiz-heading, #e7e1d4); | |||
font-weight: bold; | |||
line-height: 1.3; | |||
} | } | ||
.wizlords- | .wizlords-collapsible-section-divider { | ||
width: 80%; | |||
height: 1px; | |||
margin: 18px auto 14px; | |||
background: var(--wiz-race-table-divider-colour, #9d7531); | |||
} | } | ||
.wizlords- | .wizlords-collapsible-section > .mw-collapsible-toggle { | ||
margin: 11px 0 0 0; | |||
color: var(--wiz-text, #d2d2d2) !important; | |||
margin: 0 | |||
} | } | ||
.wizlords- | .wizlords-collapsible-section > .mw-collapsible-toggle .mw-collapsible-text, | ||
.wizlords- | .wizlords-collapsible-section > .mw-collapsible-toggle a { | ||
color: var(--wiz-link, #ff942d) !important; | |||
color: var(--wiz-link, #ff942d) | |||
} | } | ||
.wizlords- | .wizlords-collapsible-section-bottom-toggle { | ||
margin: 8px 0 0; | |||
padding: 0; | |||
text-align: right; | |||
color: var(--wiz-text, #d2d2d2) !important; | |||
cursor: pointer; | |||
} | } | ||
.wizlords- | .wizlords-collapsible-section-bottom-toggle span, | ||
.wizlords- | .wizlords-collapsible-section-bottom-toggle a { | ||
color: # | color: var(--wiz-link, #ff942d) !important; | ||
} | } | ||
/* RACE | /* RACE TABLE */ | ||
/* ----------------- | /* ---------- */ | ||
.wikitable.wizlords-race-table, | |||
.wizlords-race-table { | |||
--wiz-race-table-border-width: 1px; | |||
--wiz-race-table-border-colour: #4d4d4d; | |||
--wiz-race-table-divider-colour: #9d7531; | |||
width: 100%; | |||
border-collapse: collapse; | |||
table-layout: fixed; | |||
border: var(--wiz-race-table-border-width) solid var(--wiz-race-table-border-colour) !important; | |||
background: var(--wiz-content-background, #222); | |||
color: var(--wiz-text, #d2d2d2); | color: var(--wiz-text, #d2d2d2); | ||
} | } | ||
.wizlords-race- | .wikitable.wizlords-race-table tr, | ||
color: var(--wiz- | .wizlords-race-table tr { | ||
border-color: var(--wiz-race-table-border-colour) !important; | |||
} | } | ||
.wizlords-race- | .wikitable.wizlords-race-table th, | ||
.wikitable.wizlords-race-table td, | |||
align- | .wizlords-race-table th, | ||
.wizlords-race-table td { | |||
padding: 5px 8px; | |||
border: var(--wiz-race-table-border-width) solid var(--wiz-race-table-border-colour) !important; | |||
background: #1f1e1e; | |||
vertical-align: middle; | |||
} | |||
.wizlords-race-table th { | |||
color: var(--wiz-heading, #e7e1d4) !important; | |||
text-align: center; | |||
font-weight: bold; | |||
} | } | ||
.wizlords-race- | .wikitable.wizlords-race-table td.race-name, | ||
.wizlords-race-table td.race-name { | |||
background: #171717 !important; | |||
text-align: center; | |||
font-weight: bold; | |||
white-space: nowrap; | |||
} | } | ||
.wizlords-race- | .wizlords-race-table .race-icon { | ||
display: block; | display: block; | ||
width: 100px; | width: 100px; | ||
height: 100px; | height: 100px; | ||
margin: 0 auto 6px; | |||
object-fit: contain; | object-fit: contain; | ||
} | |||
} | |||
.wizlords-race- | .wikitable.wizlords-race-table td.subculture, | ||
.wizlords-race-table td.subculture { | |||
background: #171717 !important; | |||
text-align: center; | |||
font-weight: bold; | |||
vertical-align: middle; | |||
font- | |||
} | } | ||
.wizlords-race- | .wizlords-race-table .subculture-icon { | ||
. | display: block; | ||
width: 45px; | |||
height: 45px; | |||
margin: 4px auto 4px; | |||
object-fit: contain; | |||
} | } | ||
.wizlords-race- | .wizlords-race-table .race-bonus, | ||
.wizlords-race-table .subculture-bonus { | |||
min-width: 280px; | |||
} | } | ||
.wizlords-race- | .wizlords-race-table ul { | ||
margin: 0; | |||
padding-left: 20px; | |||
list-style: disc outside; | |||
} | } | ||
.wizlords-race- | .wizlords-race-table li { | ||
display: list-item; | |||
margin: 0 0 3px; | |||
list-style: disc outside; | |||
} | } | ||
.wizlords- | .wizlords-race-table li::marker { | ||
color: var(--wiz-text, #d2d2d2); | |||
} | } | ||
.wizlords- | .wizlords-race-table .race-divider td { | ||
height: 8px; | |||
padding: 0; | |||
border: var(--wiz-race-table-border-width) solid var(--wiz-race-table-divider-colour) !important; | |||
background: var(--wiz-race-table-divider-colour); | |||
background: | |||
} | } | ||
/* RACES LANDING PAGE */ | |||
/* ------------------ */ | |||
.wizlords-races-landing { | |||
max-width: 100%; | |||
} | } | ||
.wizlords- | .wizlords-races-landing .race-note { | ||
margin: 14px 0 18px; | |||
font-style: italic; | |||
} | } | ||
.wizlords- | .wizlords-races-grid { | ||
display: flex; | |||
flex-wrap: wrap; | |||
justify-content: center; | |||
gap: 28px 44px; | |||
margin: 26px auto 24px; | |||
max-width: 860px; | |||
} | } | ||
.wizlords- | .wizlords-race-link { | ||
display: block; | |||
width: 120px; | |||
text-align: center; | text-align: center; | ||
text-decoration: none; | |||
} | } | ||
.wizlords- | .wizlords-race-link img { | ||
display: block; | display: block; | ||
width: | width: 100px; | ||
height: | height: 100px; | ||
margin: 0 auto 8px; | |||
margin: 0 auto | |||
object-fit: contain; | object-fit: contain; | ||
border: 0; | border: 0; | ||
background: transparent; | background: transparent; | ||
transition: transform 120ms ease, filter 120ms ease; | |||
} | } | ||
.wizlords- | .wizlords-race-label, | ||
.wizlords- | .wizlords-race-label a { | ||
display: block; | |||
color: var(--wiz-link, #ff942d); | color: var(--wiz-link, #ff942d); | ||
font-weight: bold; | font-weight: bold; | ||
line-height: 1. | line-height: 1.3; | ||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
.wizlords- | .wizlords-race-link:hover img { | ||
filter: brightness(1.15); | |||
transform: translateY(-2px); | |||
} | } | ||
.wizlords- | .wizlords-race-link:hover .wizlords-race-label, | ||
.wizlords-race-link:hover .wizlords-race-label a { | |||
color: #ffd37a; | |||
text-decoration: none; | |||
} | } | ||
.wizlords- | /* RACE DETAIL PAGES */ | ||
width: | /* ----------------- */ | ||
.wizlords-race-page { | |||
max-width: 100%; | |||
} | } | ||
.wizlords- | .hatnote, | ||
.wizlords-race-page .hatnote { | |||
margin: 4px 0 18px; | |||
padding-left: 18px; | |||
margin: | color: var(--wiz-text, #d2d2d2); | ||
padding: | font-style: italic; | ||
} | } | ||
.wizlords- | .hatnote a, | ||
.wizlords-race-page .hatnote a { | |||
color: var(--wiz- | color: var(--wiz-link, #ff942d); | ||
text-decoration: none; | |||
text- | |||
} | } | ||
.wizlords- | .wizlords-culture-grid { | ||
display: grid; | display: grid; | ||
grid-template-columns: repeat(6, minmax(0, 1fr)); | |||
grid-template- | gap: 14px; | ||
margin: 18px auto 24px; | |||
margin: | |||
} | } | ||
.wizlords- | .wizlords-culture-card { | ||
display: | display: flex; | ||
flex-direction: column; | |||
grid-column: span 2; | |||
min-height: 100%; | |||
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d); | |||
background: #171717; | |||
} | } | ||
.wizlords- | .wizlords-culture-grid.cultures-2 .wizlords-culture-card:nth-child(1), | ||
.wizlords-culture-grid.cultures-4 .wizlords-culture-card:nth-child(1), | |||
.wizlords-culture-grid.cultures-4 .wizlords-culture-card:nth-child(3) { | |||
grid-column: 2 / span 2; | |||
} | } | ||
.wizlords- | .wizlords-culture-grid.cultures-2 .wizlords-culture-card:nth-child(2), | ||
.wizlords-culture-grid.cultures-4 .wizlords-culture-card:nth-child(2), | |||
.wizlords-culture-grid.cultures-4 .wizlords-culture-card:nth-child(4) { | |||
grid-column: 4 / span 2; | |||
} | } | ||
.wizlords- | .wizlords-culture-grid.cultures-5 .wizlords-culture-card:nth-child(4) { | ||
grid- | grid-column: 2 / span 2; | ||
} | } | ||
.wizlords- | .wizlords-culture-grid.cultures-5 .wizlords-culture-card:nth-child(5) { | ||
grid- | grid-column: 4 / span 2; | ||
} | } | ||
.wizlords- | .wizlords-culture-grid.cultures-7 .wizlords-culture-card:nth-child(7) { | ||
grid-column: 3 / span 2; | |||
} | } | ||
.wizlords- | .wizlords-culture-card-header { | ||
padding: 16px 12px 12px; | |||
text-align: center; | |||
border-bottom: 1px solid var(--wiz-race-table-border-colour, #4d4d4d); | |||
} | } | ||
.wizlords- | .wizlords-culture-card-header img { | ||
display: block; | |||
width: 250px; | |||
height: 250px; | |||
max-width: 100%; | |||
margin: 0 auto 10px; | |||
object-fit: contain; | |||
border: 0; | |||
background: transparent; | |||
} | } | ||
.wizlords- | .wizlords-culture-card-title, | ||
color: # | .wizlords-culture-card-title a { | ||
color: var(--wiz-link, #ff942d); | |||
font-size: 16px; | |||
font-weight: bold; | |||
line-height: 1.25; | |||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
.wizlords-culture- | .wizlords-culture-card-body { | ||
flex: 1 1 auto; | |||
padding: 12px; | |||
background: #1f1e1e; | |||
} | } | ||
.wizlords-culture- | .wizlords-culture-card-body p { | ||
margin: 0 0 12px; | |||
margin- | font-style: italic; | ||
line-height: 1. | line-height: 1.55; | ||
} | } | ||
.wizlords-culture- | .wizlords-culture-separator { | ||
width: 110px; | |||
height: 1px; | |||
margin: 14px auto 12px; | |||
background: var(--wiz-race-table-divider-colour, #9d7531); | |||
} | } | ||
.wizlords- | .wizlords-shared-classes { | ||
margin | display: table; | ||
width: auto; | |||
min-width: 330px; | |||
margin: 16px auto 22px; | |||
padding: 10px 28px; | |||
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d); | |||
background: #171717; | |||
} | } | ||
.wizlords- | .wizlords-shared-classes-title { | ||
margin: | margin-bottom: 5px; | ||
color: var(--wiz-heading-colour, #f2ead7); | |||
font-weight: bold; | |||
text-align: center; | |||
} | } | ||
.wizlords- | .wizlords-shared-classes ul { | ||
display: | display: grid; | ||
margin: 0 0 | grid-auto-flow: column; | ||
grid-template-rows: repeat(5, auto); | |||
grid-auto-columns: max-content; | |||
column-gap: 42px; | |||
width: max-content; | |||
margin: 2px auto 0; | |||
padding-left: 0; | |||
list-style: disc outside; | |||
} | } | ||
.wizlords- | .wizlords-shared-classes li { | ||
display: list-item; | |||
margin: 0 0 3px; | |||
margin-left: 18px; | |||
break-inside: avoid; | |||
} | } | ||
.wizlords- | .wizlords-shared-classes.classes-8 ul { | ||
. | grid-template-rows: repeat(4, auto); | ||
} | } | ||
.wizlords- | .wizlords-shared-classes.classes-9 ul { | ||
grid-template-rows: repeat(5, auto); | |||
} | } | ||
.wizlords- | .wizlords-shared-classes.classes-4 ul { | ||
grid-template-rows: repeat(4, auto); | |||
} | } | ||
.wizlords- | .wizlords-shared-classes.classes-9-three ul { | ||
grid-template-rows: repeat(3, auto); | |||
grid-template- | |||
} | } | ||
.wizlords- | .wizlords-class-compare { | ||
display: | display: flex; | ||
justify-content: center; | |||
align-items: stretch; | |||
gap: 12px; | |||
margin: 16px auto 22px; | |||
} | } | ||
.wizlords- | .wizlords-class-compare .wizlords-shared-classes { | ||
margin: 0; | |||
min-width: 0; | |||
} | } | ||
.wizlords- | .wizlords-shared-classes a { | ||
color: var(--wiz-link, #ff942d); | |||
color: var(--wiz- | |||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
.wizlords- | .wizlords-shared-classes a:hover { | ||
color: #ffd37a; | |||
text-decoration: none; | |||
color: | |||
} | } | ||
.wizlords-culture- | .wizlords-culture-classes { | ||
margin-top: 12px; | |||
font-weight: bold; | |||
font- | |||
} | } | ||
.wizlords-culture- | .wizlords-culture-known-for, | ||
.wizlords-culture-suggested-class { | |||
margin-top: 10px; | |||
line-height: 1.45; | |||
} | } | ||
.wizlords-culture- | .wizlords-culture-suggested-class a { | ||
color: var(--wiz-link, #ff942d); | |||
text-decoration: none; | |||
} | } | ||
.wizlords-culture- | .wizlords-culture-class-note { | ||
margin-top: 6px; | |||
line-height: 1.45; | |||
} | } | ||
.wizlords-culture- | .wizlords-culture-card-body ul { | ||
margin: 4px 0 0; | |||
padding-left: 28px; | |||
list-style: disc outside; | |||
} | } | ||
.wizlords-culture- | .wizlords-culture-card-body li { | ||
display: list-item; | |||
margin: 0 0 3px; | |||
} | } | ||
.wizlords-culture-row-classes { | .wizlords-culture-card-body a, | ||
color: var(--wiz- | .wizlords-culture-row-classes a { | ||
color: var(--wiz-link, #ff942d); | |||
text-decoration: none; | |||
} | } | ||
.wizlords-culture- | .wizlords-culture-card-body a:hover, | ||
.wizlords-culture-row-classes a:hover { | |||
color: #ffd37a; | |||
text-decoration: none; | |||
} | } | ||
.wizlords-culture | .wizlords-culture-list { | ||
margin: 18px 0 24px; | |||
margin: 0 | |||
} | } | ||
.wizlords-culture- | .wizlords-culture-row { | ||
padding: 20px 0 24px; | |||
border-bottom: 1px solid var(--wiz-race-table-border-colour, #4d4d4d); | |||
} | } | ||
.wizlords-culture-row-feature { | |||
display: grid; | |||
grid-template-columns: 150px 1px minmax(0, 1fr) 300px; | |||
align-items: center; | |||
gap: 22px; | |||
margin: 10px 0 18px; | |||
} | } | ||
.wizlords-culture-row-icon img { | |||
display: block; | |||
width: 150px; | |||
height: 150px; | |||
object-fit: contain; | |||
border: 0; | |||
background: transparent; | |||
} | } | ||
.wizlords-culture-row-divider { | |||
width: 1px; | |||
height: 150px; | |||
background: var(--wiz-race-table-border-colour, #4d4d4d); | |||
} | } | ||
.wizlords- | .wizlords-culture-row-title, | ||
.wizlords-culture-row-title a { | |||
color: var(--wiz-heading, #e7e1d4); | |||
font-size: 18px; | |||
font-weight: bold; | |||
line-height: 1.3; | |||
text-decoration: none; | |||
} | } | ||
.wizlords- | .wizlords-culture-row-description { | ||
position: relative; | |||
margin: 0; | |||
padding: 0 34px; | |||
color: var(--wiz-text, #d2d2d2); | |||
font-size: 16px; | |||
font-style: italic; | |||
line-height: 1.6; | |||
} | } | ||
.wizlords- | .wizlords-culture-row-description::before, | ||
.wizlords-culture-row-description::after { | |||
position: absolute; | |||
color: #555; | |||
font-size: 42px; | |||
line-height: 1; | |||
color: | |||
} | } | ||
.wizlords- | .wizlords-culture-row-description::before { | ||
content: "\201C"; | |||
left: 0; | |||
top: -6px; | |||
} | } | ||
.wizlords- | .wizlords-culture-row-description::after { | ||
content: "\201D"; | |||
right: 0; | |||
bottom: -18px; | |||
} | } | ||
.wizlords- | .wizlords-culture-appearance { | ||
box-sizing: border-box; | |||
width: 300px; | |||
padding: 4px; | |||
border: 1px solid var(--wiz-race-table-divider-colour, #9d7531); | |||
background: #171717; | |||
} | } | ||
.wizlords- | .wizlords-culture-appearance img { | ||
display: | display: block; | ||
width: | width: 300px; | ||
height: | height: 138px; | ||
object-fit: | object-fit: cover; | ||
border: 0; | |||
background: transparent; | |||
} | } | ||
.wizlords- | .wizlords-culture-appearance-caption { | ||
margin-top: 4px; | |||
color: var(--wiz-text, #d2d2d2); | |||
font-size: 12px; | |||
line-height: 1.3; | |||
} | } | ||
.wizlords- | .wizlords-page-image { | ||
border- | box-sizing: border-box; | ||
width: min(450px, 100%); | |||
padding: 6px; | |||
border: 1px solid var(--wiz-content-border, #ff942d); | |||
background: #171717; | |||
} | } | ||
.wizlords- | .wizlords-page-image p { | ||
margin: 0; | margin: 0; | ||
padding | padding: 0; | ||
} | } | ||
.wizlords- | .wizlords-page-image span, | ||
display: | .wizlords-page-image a { | ||
display: block; | |||
} | } | ||
.wizlords- | .wizlords-page-image.right { | ||
float: right; | |||
margin: 0 0 16px 24px; | |||
} | } | ||
.wizlords- | .wizlords-page-image.left { | ||
. | float: left; | ||
margin: 0 24px 16px 0; | |||
} | } | ||
.wizlords- | .wizlords-page-image img { | ||
display: | display: block; | ||
box-sizing: border-box; | |||
width: 100%; | |||
aspect-ratio: 2 / 1; | |||
height: auto; | |||
object-fit: cover; | |||
border: 1px solid var(--wiz-content-border, #ff942d); | |||
background: transparent; | |||
} | } | ||
.wizlords- | .wizlords-page-image-caption { | ||
margin-top: 7px; | |||
padding: 0 4px; | |||
color: var(--wiz-text, #d2d2d2); | |||
font-size: 12px; | |||
line-height: 1.3; | |||
} | } | ||
.wizlords- | .wizlords-culture-row-classes { | ||
color: var(--wiz-text, #d2d2d2); | |||
font-size: 14px; | |||
} | } | ||
.wizlords-class- | .wizlords-culture-class-list { | ||
display: grid; | |||
grid-auto-flow: column; | |||
grid-auto-columns: minmax(130px, max-content); | |||
grid-template-rows: repeat(4, auto); | |||
gap: 4px 18px; | |||
margin: 6px 0 0; | |||
padding-left: 28px; | |||
list-style: disc outside; | |||
} | } | ||
.wizlords-class- | .wizlords-culture-class-list li { | ||
display: list-item; | |||
margin: 0; | |||
padding: 0; | |||
} | } | ||
.wizlords-class- | .wizlords-culture-class-list li::marker { | ||
color: var(--wiz-text, #d2d2d2); | |||
} | } | ||
/* Tablet and small-desktop layouts use a three-column grid. */ | |||
@media (min-width: 600px) and (max-width: 1199px) { | |||
.wiz-grid { | |||
grid-template-columns: repeat(3, minmax(0, 1fr)) !important; | |||
} | |||
} | } | ||
. | /* Phone layout uses two columns. */ | ||
@media (max-width: 599px) { | |||
.wiz-grid { | |||
grid-template-columns: repeat(2, minmax(0, 1fr)) !important; | |||
} | |||
} | } | ||
.wizlords- | /* CLASS OVERVIEW PAGE */ | ||
/* ------------------- */ | |||
.wizlords-classes-page { | |||
max-width: 100%; | |||
} | } | ||
.wizlords- | .wizlords-classes-page ul { | ||
list-style: disc outside; | |||
padding-left: 28px; | |||
} | |||
.wizlords-classes-page li { | |||
display: list-item; | |||
} | } | ||
.wizlords-class- | .wizlords-class-category-table { | ||
width: 100%; | |||
min-width: 0; | |||
max-width: 640px; | |||
margin: 18px auto 24px; | |||
border: 0 !important; | |||
background: #171717; | |||
color: var(--wiz-text, #d2d2d2); | color: var(--wiz-text, #d2d2d2); | ||
border-collapse: collapse; | |||
table-layout: fixed; | |||
} | } | ||
.wizlords-class- | .wizlords-class-category-table th, | ||
.wizlords-class-category-table td { | |||
box-sizing: border-box; | |||
width: 33.333%; | |||
min-width: 0; | |||
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d) !important; | |||
vertical-align: top; | |||
} | } | ||
.wizlords-class-category-table th { | |||
padding: 8px 18px !important; | |||
.wizlords- | background: #1f1e1e !important; | ||
color: var(--wiz-heading, #e7e1d4) !important; | |||
font-size: 18px; | |||
color: var(--wiz- | text-align: center; | ||
font- | |||
} | } | ||
.wizlords- | .wizlords-class-category-icon { | ||
margin: 0 0 6px; | |||
align | text-align: center; | ||
} | } | ||
.wizlords- | .wizlords-class-category-icon img { | ||
display: inline-block; | |||
width: 110px; | |||
height: 110px; | |||
object-fit: contain; | |||
} | } | ||
.wizlords- | .wizlords-class-category-table td { | ||
padding: 8px 18px 10px 12px !important; | |||
background: #171717 !important; | |||
} | } | ||
.wizlords- | .wizlords-class-category-table tr:first-child { | ||
border-bottom: 0; | |||
} | } | ||
.wizlords- | .wizlords-class-category-table ul { | ||
margin: 0; | |||
padding-left: 22px; | |||
list-style: disc outside; | |||
} | } | ||
.wizlords-class-category-table li { | |||
display: list-item; | |||
margin: 0 0 3px; | |||
margin: | |||
} | } | ||
.wizlords-class-category-name { | |||
color: var(--wiz-link, #ff942d); | |||
font-weight: bold; | |||
} | } | ||
.wizlords-class-category-table a, | |||
.wizlords- | .wizlords-class-card a { | ||
color: var(--wiz-link, #ff942d); | |||
color: var(--wiz- | text-decoration: none; | ||
text- | |||
} | } | ||
.wizlords-class-category-mobile { | |||
display: none; | |||
} | } | ||
/* Very narrow phones: use explicit paired category rows instead of trying to | |||
.wizlords- | re-map MediaWiki's desktop table, whose headers and lists are rendered in | ||
separate table rows. This avoids horizontal scroll and keeps each category | |||
} | as icon/name on the left and class list on the right. */ | ||
@media (max-width: 490px) { | |||
.wizlords-class-category-table { | |||
display: none !important; | |||
} | |||
.wizlords-class-category-mobile { | |||
display: block; | |||
width: 100%; | |||
max-width: 420px; | |||
margin: 18px auto 24px; | |||
border: 0 !important; | |||
overflow: visible; | |||
background: #171717; | |||
color: var(--wiz-text, #d2d2d2); | |||
} | |||
.wizlords-class-category-mobile-row { | |||
display: grid; | |||
grid-template-columns: 44% 56%; | |||
align-items: stretch; | |||
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d); | |||
} | border-bottom: 0; | ||
} | |||
.wizlords-class-category-mobile-row:last-child { | |||
border-bottom: 1px solid var(--wiz-race-table-border-colour, #4d4d4d); | |||
} | |||
} | |||
.wizlords- | .wizlords-class-category-mobile-heading { | ||
box-sizing: border-box; | |||
padding: 8px 8px !important; | |||
background: # | border-right: 1px solid var(--wiz-race-table-border-colour, #4d4d4d); | ||
} | background: #1f1e1e; | ||
color: var(--wiz-heading, #e7e1d4); | |||
font-size: 16px; | |||
font-weight: bold; | |||
text-align: center; | |||
} | |||
.wizlords-class-category-mobile-list { | |||
box-sizing: border-box; | |||
display: flex; | |||
align-items: center; | |||
padding: 8px 10px !important; | |||
background: #171717; | |||
} | |||
.wizlords-class-category-mobile .wizlords-class-category-icon { | |||
margin-bottom: 4px; | |||
} | |||
.wizlords-class-category-mobile .wizlords-class-category-icon img { | |||
width: 64px; | |||
height: auto; | |||
max-width: 100%; | |||
} | |||
.wizlords-class-category-mobile ul { | |||
margin: 0; | |||
padding-left: 18px; | |||
list-style: disc outside; | |||
} | |||
.wizlords- | .wizlords-class-category-mobile li { | ||
display: list-item; | |||
margin: 0 0 3px; | |||
} | |||
} | } | ||
.wizlords- | .wizlords-class-card-grid { | ||
-- | display: grid; | ||
grid-template-columns: repeat(6, minmax(0, 1fr)); | |||
gap: 14px; | |||
margin: 16px auto 24px; | |||
} | } | ||
.wizlords- | .wizlords-class-card { | ||
grid-column: span 2; | |||
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d); | |||
background: #171717; | |||
display: flex; | display: flex; | ||
flex-direction: column; | |||
scroll-margin-top: 90px; | |||
} | } | ||
.wizlords- | .wizlords-class-card-grid.cards-5 .wizlords-class-card:nth-child(4), | ||
.wizlords-class-card-grid.cards-4 .wizlords-class-card:nth-child(1), | |||
.wizlords-class-card-grid.cards-4 .wizlords-class-card:nth-child(3) { | |||
grid-column: 2 / span 2; | |||
} | } | ||
.wizlords- | .wizlords-class-card-grid.cards-5 .wizlords-class-card:nth-child(5), | ||
.wizlords-class-card-grid.cards-4 .wizlords-class-card:nth-child(2), | |||
.wizlords-class-card-grid.cards-4 .wizlords-class-card:nth-child(4) { | |||
grid-column: 4 / span 2; | |||
} | } | ||
.wizlords- | .wizlords-class-card-title { | ||
padding: 0 12px 10px; | |||
color: var(--wiz- | color: var(--wiz-link, #ff942d); | ||
font-weight: bold; | |||
font-size: 18px; | |||
line-height: 1.25; | |||
text-align: center; | |||
} | } | ||
.wizlords- | .wizlords-class-card-icon { | ||
padding: 18px 12px 8px; | |||
text-align: center; | |||
} | } | ||
.wizlords- | .wizlords-class-card-icon img { | ||
display: inline-block; | |||
width: 250px; | |||
height: 250px; | |||
object-fit: contain; | |||
} | } | ||
.wizlords- | .wizlords-class-card-body { | ||
. | padding: 12px; | ||
background: #1f1e1e; | |||
line-height: 1.5; | |||
flex: 1 1 auto; | |||
} | } | ||
.wizlords- | .wizlords-class-card-summary { | ||
font-style: italic; | |||
} | } | ||
.wizlords- | .wizlords-class-card-divider { | ||
width: 55%; | |||
height: 1px; | |||
margin: 14px auto 12px; | |||
background: var(--wiz-race-table-divider-colour, #9d7531); | |||
} | } | ||
.wizlords- | .wizlords-class-card-rules { | ||
color: var(--wiz-text, #d2d2d2); | color: var(--wiz-text, #d2d2d2); | ||
} | } | ||
.wizlords- | .wizlords-class-card-rules div { | ||
margin | margin: 0 0 4px; | ||
} | } | ||
.wizlords- | .wizlords-class-category-accordion { | ||
--wiz-class-category-accent: var(--wiz-content-border, #ff942d); | |||
margin: 5px 0 14px; | |||
} | } | ||
.wizlords- | .wizlords-class-category-accordion-martial { | ||
--wiz-class-category-accent: #9d7531; | |||
} | } | ||
.wizlords- | .wizlords-class-category-accordion-arcane { | ||
--wiz-class-category-accent: #d66be3; | |||
} | |||
.wizlords-class-category-accordion-divine { | |||
--wiz-class-category-accent: #19c4eb; | |||
} | } | ||
.wizlords- | .wizlords-class-category-accordion-heading { | ||
padding: | display: flex; | ||
color: var(--wiz- | align-items: center; | ||
gap: 8px; | |||
margin: 0 0 4px; | |||
padding-top: 4px; | |||
padding-bottom: 2px; | |||
border-bottom: 0; | |||
color: var(--wiz-heading, #e7e1d4); | |||
font-size: 18px; | font-size: 18px; | ||
font-weight: bold; | font-weight: bold; | ||
line-height: | line-height: 24px; | ||
} | } | ||
.wizlords- | .wizlords-class-category-accordion .wizlords-class-card-grid { | ||
margin-top: 4px; | |||
margin-bottom: 12px; | |||
} | } | ||
.wizlords- | .wizlords-class-category-accordion-title { | ||
color: var(--wiz-heading, #e7e1d4); | |||
} | } | ||
.wizlords- | .wizlords-class-category-accordion-icon { | ||
display: inline-flex; | |||
align-items: center; | |||
justify-content: center; | |||
width: 30px; | |||
height: 30px; | |||
vertical-align: middle; | |||
line-height: 1; | |||
} | } | ||
.wizlords- | .wizlords-class-category-accordion-icon span, | ||
.wizlords-class-category-accordion-icon a { | |||
display: inline-flex; | |||
align-items: center; | |||
justify-content: center; | |||
width: 100%; | |||
height: 100%; | |||
line-height: 1; | |||
} | } | ||
.wizlords- | .wizlords-class-category-accordion-icon img { | ||
display: block; | |||
width: 28px !important; | |||
height: 28px !important; | |||
max-width: 28px !important; | |||
max-height: 28px !important; | |||
object-fit: contain; | |||
} | } | ||
.wizlords- | .wizlords-class-category-accordion-body { | ||
display: | display: block; | ||
} | } | ||
.wizlords- | /* MAGIC PAGE */ | ||
/* ---------- */ | |||
.wizlords-magic-used-by { | |||
margin: 4px 0 14px; | |||
padding-left: 18px; | |||
color: var(--wiz-text, #d2d2d2); | |||
font-style: italic; | |||
} | } | ||
.wizlords- | .wizlords-magic-intro { | ||
display: flex; | |||
align-items: center; | |||
gap: 22px; | |||
margin: 12px 0 18px; | |||
} | } | ||
.wizlords- | .wizlords-magic-intro-icon { | ||
flex: 0 0 auto; | |||
} | } | ||
.wizlords- | .wizlords-magic-intro-icon img { | ||
display: block; | |||
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d) | width: 100px; | ||
height: 100px; | |||
object-fit: contain; | |||
} | |||
.wizlords-magic-quote { | |||
padding-left: 20px; | |||
border-left: 1px solid var(--wiz-race-table-border-colour, #4d4d4d); | |||
color: var(--wiz-text, #d2d2d2); | color: var(--wiz-text, #d2d2d2); | ||
font-style: italic; | |||
line-height: 1.55; | |||
} | } | ||
.wizlords- | .wizlords-section-divider { | ||
width: 55%; | |||
height: 1px; | |||
margin: 22px auto 18px; | |||
background: var(--wiz-race-table-divider-colour, #9d7531); | |||
} | } | ||
/* SHARED STANDARD TABLE | |||
.wizlords- | --------------------- | ||
.wizlords- | Opt-in colour and border treatment for ordinary custom wiki tables. | ||
Add "wizlords-table" beside "wikitable" instead of overriding every | |||
MediaWiki-generated wikitable. Component-specific classes continue to own | |||
specialised widths, alignment, captions, and collapsible behaviour. */ | |||
.wikitable.wizlords-table, | |||
.wizlords-table { | |||
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d) !important; | |||
border-collapse: collapse; | |||
background: #171717 !important; | |||
color: var(--wiz-text, #d2d2d2) !important; | |||
} | } | ||
.wizlords- | .wikitable.wizlords-table th, | ||
.wizlords- | .wikitable.wizlords-table td, | ||
.wizlords-table th, | |||
.wizlords-table td { | |||
padding: 8px 12px; | |||
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d) !important; | |||
background: #171717 !important; | |||
color: var(--wiz-text, #d2d2d2) !important; | |||
} | |||
.wikitable.wizlords-table th, | |||
.wizlords-table th { | |||
background: #1f1e1e !important; | |||
color: var(--wiz-heading, #e7e1d4) !important; | |||
} | } | ||
.wizlords- | .wikitable.wizlords-magic-table, | ||
.wizlords-magic-table { | |||
width: auto; | |||
min-width: 520px; | |||
max-width: 680px; | |||
margin: 16px 0 18px; | |||
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d) !important; | |||
border-collapse: collapse; | |||
background: #171717; | |||
color: var(--wiz-text, #d2d2d2); | |||
} | } | ||
.wizlords- | .wikitable.wizlords-example-table, | ||
.wizlords-example-table { | |||
width: 100%; | |||
max-width: 600px; | |||
margin-left: 0; | |||
margin-right: auto; | |||
} | } | ||
.wizlords- | .wikitable.wizlords-example-table-full-heal, | ||
.wizlords-example-table-full-heal { | |||
max-width: 500px; | |||
} | } | ||
.wizlords- | .wikitable.wizlords-example-table-full-heal th:first-child, | ||
.wikitable.wizlords-example-table-full-heal td:first-child, | |||
.wizlords-example-table-full-heal th:first-child, | |||
.wizlords-example-table-full-heal td:first-child { | |||
width: 34%; | |||
} | } | ||
.wizlords- | .wikitable.wizlords-example-table-full-heal th:nth-child(2), | ||
.wikitable.wizlords-example-table-full-heal td:nth-child(2), | |||
.wizlords-example-table-full-heal th:nth-child(2), | |||
.wizlords-example-table-full-heal td:nth-child(2) { | |||
width: 66%; | |||
} | } | ||
.wizlords- | .wikitable.wizlords-magic-table th, | ||
.wikitable.wizlords-magic-table td, | |||
.wizlords-magic-table th, | |||
.wizlords-magic-table td { | |||
padding: 8px 18px !important; | |||
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d) !important; | |||
background: #171717 !important; | |||
} | } | ||
.wizlords- | .wikitable.wizlords-magic-table th, | ||
.wizlords-magic-table th { | |||
background: #1f1e1e !important; | |||
color: var(--wiz-heading, #e7e1d4) !important; | |||
text-align: center; | |||
} | } | ||
.wizlords- | .wikitable.wizlords-reward-table, | ||
.wizlords-reward-table { | |||
min-width: 0; | |||
max-width: none; | |||
width: auto; | |||
margin-left: 0; | |||
margin-right: auto; | |||
border: 0 !important; | |||
border-radius: 0; | |||
box-shadow: none; | |||
outline: 0; | |||
} | } | ||
.wizlords- | .wikitable.wizlords-reward-table th, | ||
.wikitable.wizlords-reward-table td, | |||
.wizlords-reward-table th, | |||
.wizlords-reward-table td { | |||
white-space: nowrap; | |||
} | } | ||
.wizlords- | .wikitable.wizlords-reward-table th:nth-child(2), | ||
.wikitable.wizlords-reward-table td:nth-child(2), | |||
.wizlords-reward-table th:nth-child(2), | |||
.wizlords-reward-table td:nth-child(2) { | |||
text-align: center; | |||
} | } | ||
.wizlords- | @media (max-width: 899px) { | ||
.wikitable.wizlords-reward-table, | |||
.wizlords-reward-table { | |||
margin-left: auto; | |||
margin-right: auto; | |||
} | |||
} | } | ||
@media (max-width: | .wikitable.wizlords-example-table caption, | ||
.wizlords- | .wizlords-example-table caption { | ||
.wizlords- | color: var(--wiz-heading, #e7e1d4); | ||
font-weight: bold; | |||
text-align: center; | |||
} | |||
.wikitable.wizlords-example-table caption .mw-collapsible-toggle, | |||
.wizlords-example-table caption .mw-collapsible-toggle { | |||
color: var(--wiz-text, #d2d2d2) !important; | |||
} | |||
.wikitable.wizlords-example-table caption .mw-collapsible-toggle .mw-collapsible-text, | |||
.wizlords-example-table caption .mw-collapsible-toggle .mw-collapsible-text, | |||
.wikitable.wizlords-example-table caption .mw-collapsible-toggle a, | |||
.wizlords-example-table caption .mw-collapsible-toggle a { | |||
color: var(--wiz-link, #ff942d) !important; | |||
} | |||
.wikitable.wizlords-example-table th, | |||
.wikitable.wizlords-example-table td, | |||
.wizlords-example-table th, | |||
.wizlords-example-table td { | |||
text-align: center; | |||
} | |||
@media (max-width: 899px) { | |||
.wikitable.wizlords-example-table, | |||
.wizlords-example-table { | |||
min-width: 0; | |||
width: 100%; | |||
box-sizing: border-box; | |||
table-layout: fixed; | |||
max-width: 600px; | |||
margin: 14px auto 18px; | |||
border: 0 !important; | |||
border-radius: 0; | |||
} | } | ||
.wizlords- | .wikitable.wizlords-example-table-full-heal, | ||
.wizlords-example-table-full-heal { | |||
max-width: 500px; | |||
} | } | ||
. | .wikitable.wizlords-example-table.mw-collapsed, | ||
.wizlords-example-table.mw-collapsed { | |||
.wizlords- | background: transparent !important; | ||
} | |||
. | |||
.wizlords- | .wikitable.wizlords-example-table caption, | ||
.wizlords-example-table caption { | |||
display: table-caption !important; | |||
caption-side: top; | |||
width: auto; | |||
max-width: none; | |||
box-sizing: border-box; | |||
padding: 0; | |||
margin: 0 0 6px; | |||
border: 0 !important; | |||
background: transparent !important; | |||
white-space: nowrap; | |||
text-align: center !important; | |||
cursor: pointer; | |||
} | } | ||
.wikitable.wizlords-example-table.mw-collapsed caption::before, | |||
.wizlords- | .wizlords-example-table.mw-collapsed caption::before { | ||
.wizlords- | content: ""; | ||
display: inline-block; | |||
width: 8px; | |||
height: 8px; | |||
margin-right: 0.35em; | |||
border-right: 2px solid currentColor; | |||
border-bottom: 2px solid currentColor; | |||
transform: translateY(-25%) rotate(45deg); | |||
transform-origin: 50% 50%; | |||
} | } | ||
.wizlords- | .wikitable.wizlords-example-table:not(.mw-collapsed) caption::before, | ||
.wizlords-example-table:not(.mw-collapsed) caption::before { | |||
content: ""; | |||
display: inline-block; | |||
width: 8px; | |||
height: 8px; | |||
margin-right: 0.35em; | |||
border-right: 2px solid currentColor; | |||
border-bottom: 2px solid currentColor; | |||
transform: translateY(10%) rotate(225deg); | |||
transform-origin: 50% 50%; | |||
} | } | ||
.wikitable.wizlords-example-table caption .mw-collapsible-toggle, | |||
.wizlords-example-table caption .mw-collapsible-toggle { | |||
display: none !important; | |||
} | |||
.wikitable.wizlords-example-table th, | |||
.wikitable.wizlords-example-table td, | |||
.wizlords-example-table th, | |||
.wizlords-example-table td { | |||
box-sizing: border-box; | |||
padding: 8px 6px !important; | |||
white-space: normal; | |||
overflow-wrap: anywhere; | |||
word-break: normal; | |||
} | |||
} | |||
@media (max-width: 599px) { | |||
.wikitable.wizlords-example-table th, | |||
.wikitable.wizlords-example-table td, | |||
.wizlords-example-table th, | |||
.wizlords-example-table td { | |||
font-size: 13px; | |||
line-height: 1.35; | |||
} | |||
} | |||
.wikitable.wizlords-reputation-table, | |||
.wizlords-reputation-table { | |||
width: 100%; | |||
max-width: none; | |||
} | |||
.wikitable.wizlords-reputation-table.mw-collapsed, | |||
.wizlords-reputation-table.mw-collapsed { | |||
width: 520px; | |||
min-width: 520px; | |||
max-width: 100%; | |||
} | |||
.wikitable.wizlords-reputation-table caption, | |||
.wizlords-reputation-table caption { | |||
white-space: nowrap; | |||
} | |||
.wikitable.wizlords-reputation-table th:nth-child(1), | |||
.wikitable.wizlords-reputation-table td:nth-child(1), | |||
.wikitable.wizlords-reputation-table th:nth-child(2), | |||
.wikitable.wizlords-reputation-table td:nth-child(2), | |||
.wizlords-reputation-table th:nth-child(1), | |||
.wizlords-reputation-table td:nth-child(1), | |||
.wizlords-reputation-table th:nth-child(2), | |||
.wizlords-reputation-table td:nth-child(2) { | |||
width: 120px; | |||
white-space: nowrap; | |||
} | |||
.wikitable.wizlords-reputation-table th:nth-child(3), | |||
.wikitable.wizlords-reputation-table td:nth-child(3), | |||
.wizlords-reputation-table th:nth-child(3), | |||
.wizlords-reputation-table td:nth-child(3) { | |||
text-align: left; | |||
} | |||
.wikitable.wizlords-reputation-table th:nth-child(3), | |||
.wizlords-reputation-table th:nth-child(3) { | |||
text-align: center; | |||
} | |||
@media (max-width: 899px) { | |||
.wikitable.wizlords-reputation-table, | |||
.wizlords-reputation-table { | |||
width: 100%; | |||
min-width: 0; | |||
max-width: 680px; | |||
margin-right: auto; | |||
margin-left: auto; | |||
table-layout: fixed; | |||
} | |||
.wikitable.wizlords-reputation-table th, | |||
.wikitable.wizlords-reputation-table td, | |||
.wizlords-reputation-table th, | |||
.wizlords-reputation-table td { | |||
padding: 8px 6px !important; | |||
white-space: normal !important; | |||
overflow-wrap: normal !important; | |||
word-break: normal !important; | |||
hyphens: none; | |||
} | |||
.wikitable.wizlords-reputation-table th:nth-child(1), | |||
.wikitable.wizlords-reputation-table td:nth-child(1), | |||
.wizlords-reputation-table th:nth-child(1), | |||
.wizlords-reputation-table td:nth-child(1) { | |||
width: 22%; | |||
text-align: center; | |||
} | |||
.wikitable.wizlords-reputation-table th:nth-child(2), | |||
.wikitable.wizlords-reputation-table td:nth-child(2), | |||
.wizlords-reputation-table th:nth-child(2), | |||
.wizlords-reputation-table td:nth-child(2) { | |||
width: 26%; | |||
text-align: center; | |||
} | |||
.wikitable.wizlords-reputation-table th:nth-child(3), | |||
.wikitable.wizlords-reputation-table td:nth-child(3), | |||
.wizlords-reputation-table th:nth-child(3), | |||
.wizlords-reputation-table td:nth-child(3) { | |||
width: 52%; | |||
text-align: left; | |||
} | |||
.wikitable.wizlords-reputation-table th:nth-child(3), | |||
.wizlords-reputation-table th:nth-child(3) { | |||
text-align: center; | |||
} | |||
} | |||
@media (max-width: 380px) { | |||
.wikitable.wizlords-reputation-table th, | |||
.wikitable.wizlords-reputation-table td, | |||
.wizlords-reputation-table th, | |||
.wizlords-reputation-table td { | |||
padding: 7px 5px !important; | |||
font-size: 12px; | |||
line-height: 1.35; | |||
} | |||
.wikitable.wizlords-reputation-table th:nth-child(1), | |||
.wikitable.wizlords-reputation-table td:nth-child(1), | |||
.wizlords-reputation-table th:nth-child(1), | |||
.wizlords-reputation-table td:nth-child(1) { | |||
width: 21%; | |||
} | |||
.wikitable.wizlords-reputation-table th:nth-child(2), | |||
.wikitable.wizlords-reputation-table td:nth-child(2), | |||
.wizlords-reputation-table th:nth-child(2), | |||
.wizlords-reputation-table td:nth-child(2) { | |||
width: 25%; | |||
} | |||
.wikitable.wizlords-reputation-table th:nth-child(3), | |||
.wikitable.wizlords-reputation-table td:nth-child(3), | |||
.wizlords-reputation-table th:nth-child(3), | |||
.wizlords-reputation-table td:nth-child(3) { | |||
width: 54%; | |||
} | |||
} | |||
@media (min-width: 600px) and (max-width: 899px) { | |||
.wikitable.wizlords-reputation-table th:nth-child(1), | |||
.wikitable.wizlords-reputation-table td:nth-child(1), | |||
.wizlords-reputation-table th:nth-child(1), | |||
.wizlords-reputation-table td:nth-child(1) { | |||
width: 18%; | |||
} | |||
.wikitable.wizlords-reputation-table th:nth-child(2), | |||
.wikitable.wizlords-reputation-table td:nth-child(2), | |||
.wizlords-reputation-table th:nth-child(2), | |||
.wizlords-reputation-table td:nth-child(2) { | |||
width: 22%; | |||
} | |||
.wikitable.wizlords-reputation-table th:nth-child(3), | |||
.wikitable.wizlords-reputation-table td:nth-child(3), | |||
.wizlords-reputation-table th:nth-child(3), | |||
.wizlords-reputation-table td:nth-child(3) { | |||
width: 60%; | |||
} | |||
} | |||
.wizlords-indented-note { | |||
margin: 8px 0 14px 28px; | |||
color: var(--wiz-text, #d2d2d2); | |||
} | |||
.wizlords-spellbook { | |||
margin: 18px 0 28px; | |||
border: 1px solid var(--wiz-spellbook-colour, var(--wiz-link, #ff942d)); | |||
background: #1f1e1e; | |||
} | |||
.wizlords-spellbook-arcane { | |||
--wiz-spellbook-colour: #c141d3; | |||
--wiz-spell-card-divider-colour: #d66be3; | |||
} | |||
.wizlords-spellbook-divine { | |||
--wiz-spellbook-colour: #089cc0; | |||
--wiz-spell-card-divider-colour: #19c4eb; | |||
} | |||
.wizlords-spellbook-title { | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
gap: 10px; | |||
padding: 14px 18px; | |||
color: var(--wiz-heading, #e7e1d4); | |||
font-size: 24px; | |||
font-weight: bold; | |||
text-align: center; | |||
} | |||
.wizlords-spellbook-title-icon { | |||
display: inline-flex; | |||
align-items: center; | |||
justify-content: center; | |||
width: 40px; | |||
height: 40px; | |||
} | |||
.wizlords-spellbook-title-icon img { | |||
display: block; | |||
width: 40px; | |||
height: 40px; | |||
object-fit: contain; | |||
} | |||
.wizlords-spellbook > .mw-collapsible-toggle { | |||
margin: 14px 18px 0 0; | |||
color: var(--wiz-text, #d2d2d2) !important; | |||
} | |||
.wizlords-spellbook > .mw-collapsible-toggle .mw-collapsible-text, | |||
.wizlords-spellbook > .mw-collapsible-toggle a { | |||
color: var(--wiz-link, #ff942d) !important; | |||
} | |||
.wizlords-spellbook-bottom-toggle { | |||
margin: 16px 0 0; | |||
padding: 0; | |||
text-align: right; | |||
color: var(--wiz-text, #d2d2d2) !important; | |||
cursor: pointer; | |||
} | |||
.wizlords-spellbook-bottom-toggle span, | |||
.wizlords-spellbook-bottom-toggle a { | |||
color: var(--wiz-link, #ff942d) !important; | |||
} | |||
.wizlords-spellbook .mw-collapsible-content { | |||
padding: 0 18px 20px; | |||
} | |||
.wizlords-spell-category-heading { | |||
position: relative; | |||
margin: 0 0 3px; | |||
padding: 0; | |||
color: var(--wiz-heading, #e7e1d4); | |||
font-size: 18px; | |||
font-weight: bold; | |||
line-height: 1.3; | |||
} | |||
.wizlords-spell-category-description { | |||
margin: 0 0 12px; | |||
color: var(--wiz-text, #d2d2d2); | |||
font-style: italic; | |||
font-weight: bold; | |||
} | |||
.wizlords-spell-card-grid + .wizlords-spell-category-heading { | |||
margin-top: 0; | |||
padding-top: 26px; | |||
} | |||
.wizlords-spell-card-grid + .wizlords-spell-category-heading::before { | |||
content: ""; | |||
position: absolute; | |||
top: 0; | |||
left: 10%; | |||
width: 80%; | |||
height: 1px; | |||
background: var(--wiz-spellbook-colour); | |||
} | |||
.wizlords-spell-card-grid { | |||
display: grid; | |||
grid-template-columns: repeat(6, minmax(0, 1fr)); | |||
gap: 14px; | |||
margin: 16px auto 26px; | |||
} | |||
.wizlords-servant-rules { | |||
margin: 16px 0 18px; | |||
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d); | |||
background: #171717; | |||
color: var(--wiz-text, #d2d2d2); | |||
} | |||
.wizlords-servant-rules-title { | |||
padding: 12px 16px 4px; | |||
color: var(--wiz-spellbook-colour); | |||
font-size: 18px; | |||
font-weight: bold; | |||
line-height: 1.25; | |||
text-align: center; | |||
} | |||
.wizlords-servant-rules-hint { | |||
display: none; | |||
padding: 0 16px 12px; | |||
color: var(--wiz-text, #d2d2d2); | |||
font-style: italic; | |||
text-align: center; | |||
} | |||
.wizlords-servant-rules.mw-collapsed .wizlords-servant-rules-hint { | |||
display: block; | |||
} | |||
.wizlords-servant-rules:not(.mw-collapsed) .wizlords-servant-rules-hint { | |||
display: none; | |||
} | |||
.wizlords-servant-rules > .mw-collapsible-toggle { | |||
margin: 12px 16px 0 0; | |||
color: var(--wiz-text, #d2d2d2) !important; | |||
} | |||
.wizlords-servant-rules > .mw-collapsible-toggle .mw-collapsible-text, | |||
.wizlords-servant-rules > .mw-collapsible-toggle a { | |||
color: var(--wiz-link, #ff942d) !important; | |||
} | |||
.wizlords-servant-rules-grid { | |||
display: grid; | |||
grid-template-columns: repeat(4, minmax(0, 1fr)); | |||
gap: 18px; | |||
padding: 0 16px 16px; | |||
} | |||
.wizlords-servant-rules-section { | |||
line-height: 1.45; | |||
} | |||
.wizlords-servant-rules-section ul { | |||
margin: 6px 0 0; | |||
padding-left: 22px; | |||
list-style: disc outside; | |||
} | |||
.wizlords-servant-rules-section li { | |||
display: list-item; | |||
margin: 0 0 3px; | |||
} | |||
.wizlords-spell-card { | |||
grid-column: span 2; | |||
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d); | |||
background: #171717; | |||
color: var(--wiz-text, #d2d2d2); | |||
} | |||
.wizlords-spell-card-grid.cards-1 .wizlords-spell-card:nth-child(1) { | |||
grid-column: 3 / span 2; | |||
} | |||
.wizlords-spell-card-grid.cards-2 .wizlords-spell-card:nth-child(1), | |||
.wizlords-spell-card-grid.cards-4 .wizlords-spell-card:nth-child(1), | |||
.wizlords-spell-card-grid.cards-4 .wizlords-spell-card:nth-child(3) { | |||
grid-column: 2 / span 2; | |||
} | |||
.wizlords-spell-card-grid.cards-2 .wizlords-spell-card:nth-child(2), | |||
.wizlords-spell-card-grid.cards-4 .wizlords-spell-card:nth-child(2), | |||
.wizlords-spell-card-grid.cards-4 .wizlords-spell-card:nth-child(4) { | |||
grid-column: 4 / span 2; | |||
} | |||
.wizlords-spell-card-grid.cards-5 .wizlords-spell-card:nth-child(4) { | |||
grid-column: 2 / span 2; | |||
} | |||
.wizlords-spell-card-grid.cards-5 .wizlords-spell-card:nth-child(5) { | |||
grid-column: 4 / span 2; | |||
} | |||
.wizlords-spell-card-title { | |||
padding: 12px; | |||
color: var(--wiz-spellbook-colour, var(--wiz-link, #ff942d)); | |||
font-size: 18px; | |||
font-weight: bold; | |||
line-height: 1.25; | |||
text-align: center; | |||
} | |||
.wizlords-spell-card-meta { | |||
padding: 0 12px; | |||
line-height: 1.45; | |||
} | |||
.wizlords-spell-card-meta ul { | |||
margin: 4px 0 0; | |||
padding-left: 22px; | |||
list-style: disc outside; | |||
} | |||
.wizlords-spell-card-meta li { | |||
display: list-item; | |||
margin: 0 0 3px; | |||
} | |||
.wizlords-spell-card-divider { | |||
width: 55%; | |||
height: 1px; | |||
margin: 14px auto 12px; | |||
background: var(--wiz-spell-card-divider-colour, var(--wiz-race-table-divider-colour, #9d7531)); | |||
} | |||
.wizlords-spell-card-section { | |||
padding: 0 12px 12px; | |||
line-height: 1.45; | |||
} | |||
.wizlords-spell-card-section ul { | |||
margin: 6px 0 0; | |||
padding-left: 22px; | |||
list-style: disc outside; | |||
} | |||
.wizlords-spell-card-section li { | |||
display: list-item; | |||
margin: 0 0 3px; | |||
} | |||
.wizlords-spell-card-body { | |||
padding: 0 12px 14px; | |||
line-height: 1.45; | |||
} | |||
/* WIZLORDS NAVBOX */ | |||
/* --------------- */ | |||
.ww-navbox { | |||
clear: both; | |||
width: 100%; | |||
margin: 24px auto 12px; | |||
padding: 3px; | |||
border: 1px solid var(--wiz-content-border, #ff942d); | |||
background: #1f1e1e; | |||
color: var(--wiz-text, #d2d2d2); | |||
font-size: 88%; | |||
line-height: 1.5; | |||
text-align: center; | |||
box-sizing: border-box; | |||
} | |||
.ww-navbox-title { | |||
padding: 4px 10px 5px; | |||
background: #1a1a1a; | |||
color: var(--wiz-link, #ff942d); | |||
font-size: 16px; | |||
font-weight: bold; | |||
line-height: 1.35; | |||
text-align: center; | |||
} | |||
.ww-navbox > .mw-collapsible-toggle { | |||
position: relative; | |||
z-index: 2; | |||
float: right; | |||
margin: 4px 8px 0 0; | |||
color: var(--wiz-text, #d2d2d2) !important; | |||
font-weight: bold; | |||
} | |||
.ww-navbox > .mw-collapsible-toggle .mw-collapsible-text, | |||
.ww-navbox > .mw-collapsible-toggle a { | |||
color: var(--wiz-link, #ff942d) !important; | |||
text-decoration: none; | |||
} | |||
.ww-navbox > .mw-collapsible-content { | |||
display: flex; | |||
flex-direction: column; | |||
clear: both; | |||
margin: 0; | |||
padding: 0; | |||
} | |||
.ww-navbox-row { | |||
display: flex; | |||
margin: 0; | |||
border-top: 2px solid var(--wiz-content-background, #222); | |||
border-left: 2px solid var(--wiz-content-background, #222); | |||
border-right: 2px solid var(--wiz-content-background, #222); | |||
line-height: 1.5; | |||
} | |||
.ww-navbox-row:first-of-type { | |||
border-top: 2px solid var(--wiz-content-background, #222); | |||
} | |||
.ww-navbox-row:last-of-type { | |||
border-bottom: 2px solid var(--wiz-content-background, #222); | |||
} | |||
.ww-navbox-row:nth-child(odd) { | |||
background: #222; | |||
} | |||
.ww-navbox-row:nth-child(even) { | |||
background: #252525; | |||
} | |||
.ww-navbox-group { | |||
flex: 0 0 143px; | |||
width: 143px; | |||
padding: 4px 10px; | |||
border-right: 2px solid var(--wiz-content-background, #222); | |||
background: #1a1a1a; | |||
color: var(--wiz-link, #ff942d); | |||
font-weight: bold; | |||
text-align: right; | |||
box-sizing: border-box; | |||
white-space: normal; | |||
overflow-wrap: anywhere; | |||
} | |||
.ww-navbox-list { | |||
flex: 1; | |||
padding: 4px 10px; | |||
text-align: left; | |||
box-sizing: border-box; | |||
background: inherit; | |||
} | |||
.ww-navbox p { | |||
margin: 0; | |||
} | |||
.ww-navbox > .mw-collapsible-content > p:empty, | |||
.ww-navbox > .mw-collapsible-content > p:has(> br:only-child) { | |||
display: none; | |||
} | |||
.ww-navbox a { | |||
color: var(--wiz-link, #ff942d) !important; | |||
font-weight: bold; | |||
text-decoration: none; | |||
} | |||
.ww-navbox a:hover { | |||
color: #ffd37a !important; | |||
text-decoration: none; | |||
} | |||
.wizlords-navbox-divider { | |||
width: 90%; | |||
height: 1px; | |||
margin: 16px auto 14px; | |||
background: #9d7531; | |||
} | |||
.ww-navbox-stack > .ww-navbox-title { | |||
border-bottom: 1px solid #9d7531; | |||
} | |||
.ww-navbox-stack > .mw-collapsible-content > .ww-navbox { | |||
margin: 0; | |||
padding-top: 0; | |||
padding-bottom: 0; | |||
border-top: 0; | |||
border-left: 0; | |||
border-right: 0; | |||
border-bottom: 0; | |||
font-size: 100%; | |||
} | |||
.ww-navbox-stack > .mw-collapsible-content > .ww-navbox:first-child { | |||
border-top: 0; | |||
} | |||
.ww-navbox-stack > .mw-collapsible-content > .ww-navbox:last-child { | |||
border-bottom: 0; | |||
} | |||
/* The Player Guide is a desktop/tablet site index. Keep it out of the phone | |||
layout along with the divider that belongs to it. */ | |||
@media screen and (max-width: 599px) { | |||
.ww-navbox-stack, | |||
.wizlords-navbox-divider { | |||
display: none !important; | |||
} | |||
} | |||
/* Phone and tablet card placement reset; the phone query below then reduces | |||
these grids from two columns to one. */ | |||
@media (max-width: 899px) { | |||
.wizlords-spellbooks-desktop { | |||
display: none; | |||
} | |||
.wizlords-spellbooks-mobile { | |||
display: block; | |||
} | |||
.wizlords-class-card-grid, | |||
.wizlords-spell-card-grid { | |||
grid-template-columns: repeat(2, minmax(0, 1fr)); | |||
} | |||
.wizlords-servant-rules-grid { | |||
grid-template-columns: repeat(2, minmax(0, 1fr)); | |||
} | |||
.wizlords-class-card, | |||
.wizlords-class-card-grid.cards-5 .wizlords-class-card:nth-child(4), | |||
.wizlords-class-card-grid.cards-5 .wizlords-class-card:nth-child(5), | |||
.wizlords-class-card-grid.cards-4 .wizlords-class-card:nth-child(1), | |||
.wizlords-class-card-grid.cards-4 .wizlords-class-card:nth-child(2), | |||
.wizlords-class-card-grid.cards-4 .wizlords-class-card:nth-child(3), | |||
.wizlords-class-card-grid.cards-4 .wizlords-class-card:nth-child(4), | |||
.wizlords-spell-card, | |||
.wizlords-spell-card-grid.cards-1 .wizlords-spell-card:nth-child(1), | |||
.wizlords-spell-card-grid.cards-2 .wizlords-spell-card:nth-child(1), | |||
.wizlords-spell-card-grid.cards-2 .wizlords-spell-card:nth-child(2), | |||
.wizlords-spell-card-grid.cards-4 .wizlords-spell-card:nth-child(1), | |||
.wizlords-spell-card-grid.cards-4 .wizlords-spell-card:nth-child(2), | |||
.wizlords-spell-card-grid.cards-4 .wizlords-spell-card:nth-child(3), | |||
.wizlords-spell-card-grid.cards-4 .wizlords-spell-card:nth-child(4), | |||
.wizlords-spell-card-grid.cards-5 .wizlords-spell-card:nth-child(4), | |||
.wizlords-spell-card-grid.cards-5 .wizlords-spell-card:nth-child(5) { | |||
grid-column: auto; | |||
} | |||
.wizlords-mobile-spellbook { | |||
margin: 18px 0 30px; | |||
} | |||
.wizlords-mobile-spellbook-header { | |||
position: relative; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
gap: 9px; | |||
margin: 22px 0 10px; | |||
padding-bottom: 6px; | |||
border-bottom: 1px solid rgba(255, 255, 255, 0.18); | |||
cursor: pointer; | |||
} | |||
.wizlords-mobile-spellbook-header::before { | |||
content: ""; | |||
flex: 0 0 auto; | |||
width: 8px; | |||
height: 8px; | |||
border-right: 2px solid var(--wiz-heading, #e7e1d4); | |||
border-bottom: 2px solid var(--wiz-heading, #e7e1d4); | |||
transform: translateY(-2px) rotate(45deg); | |||
transform-origin: 50% 50%; | |||
} | |||
.wizlords-mobile-spellbook.is-open .wizlords-mobile-spellbook-header::before { | |||
transform: translateY(2px) rotate(225deg); | |||
} | |||
.wizlords-mobile-spellbook.is-open .wizlords-mobile-spellbook-header { | |||
border-bottom-color: var(--wiz-mobile-spellbook-accent, var(--wiz-content-border, #ff942d)); | |||
} | |||
.wizlords-mobile-spellbook-header:focus { | |||
outline: 2px solid var(--wiz-content-border, #ff942d); | |||
outline-offset: 3px; | |||
} | |||
.wizlords-mobile-spellbook-title { | |||
flex: 0 1 auto; | |||
color: var(--wiz-heading, #e7e1d4); | |||
font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif; | |||
font-size: 24px; | |||
font-weight: 700; | |||
line-height: 1.25; | |||
text-align: center; | |||
} | |||
.wizlords-mobile-spellbook-icon { | |||
display: flex; | |||
flex: 0 0 auto; | |||
align-items: center; | |||
justify-content: center; | |||
width: 32px; | |||
height: 32px; | |||
} | |||
.wizlords-mobile-spellbook-icon img { | |||
display: block; | |||
width: 30px !important; | |||
height: 30px !important; | |||
max-width: 30px !important; | |||
max-height: 30px !important; | |||
object-fit: contain; | |||
} | |||
.wizlords-mobile-spellbook-body { | |||
display: none; | |||
} | |||
.wizlords-mobile-spellbook.is-open .wizlords-mobile-spellbook-body { | |||
display: block; | |||
} | |||
.wizlords-mobile-spellbook-collapse { | |||
position: relative; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
width: 100%; | |||
min-height: 28px; | |||
margin: 14px auto 0; | |||
padding-bottom: 3px; | |||
border-bottom: 1px solid var(--wiz-mobile-spellbook-accent, var(--wiz-content-border, #ff942d)); | |||
color: var(--wiz-heading, #e7e1d4); | |||
font-size: 18px; | |||
font-weight: 700; | |||
line-height: 1.3; | |||
cursor: pointer; | |||
} | |||
.wizlords-mobile-spellbook-collapse::before { | |||
content: ""; | |||
width: 11px; | |||
height: 11px; | |||
border-right: 2px solid currentColor; | |||
border-bottom: 2px solid currentColor; | |||
transform: translateY(4px) rotate(225deg); | |||
transform-origin: 50% 50%; | |||
} | |||
.wizlords-mobile-spellbook-collapse:focus { | |||
outline: 2px solid var(--wiz-content-border, #ff942d); | |||
outline-offset: 3px; | |||
} | |||
.wizlords-mobile-spell-category { | |||
margin: 18px 0 22px; | |||
} | |||
.wizlords-mobile-spell-category-heading { | |||
box-sizing: border-box; | |||
width: 100%; | |||
max-width: 560px; | |||
margin: 0 auto 4px; | |||
color: var(--wiz-heading, #e7e1d4); | |||
font-size: 18px; | |||
font-weight: 700; | |||
line-height: 1.3; | |||
text-align: left; | |||
} | |||
.wizlords-mobile-spell-category-description { | |||
box-sizing: border-box; | |||
width: 100%; | |||
max-width: 560px; | |||
margin: 0 auto 12px; | |||
color: var(--wiz-text, #d2d2d2); | |||
font-size: 14px; | |||
font-style: italic; | |||
line-height: 1.45; | |||
} | |||
.wizlords-mobile-spell-card { | |||
--wiz-mobile-spell-accent: #9a3dae; | |||
position: relative; | |||
display: grid; | |||
grid-template-columns: 92px minmax(0, 1fr); | |||
grid-template-rows: auto auto auto; | |||
align-content: center; | |||
gap: 0 10px; | |||
box-sizing: border-box; | |||
width: 100%; | |||
max-width: 560px; | |||
min-height: 150px; | |||
margin: 0 auto 10px; | |||
padding: 8px 9px; | |||
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d); | |||
background: #1f1e1e; | |||
cursor: pointer; | |||
} | |||
.wizlords-mobile-spellbook-arcane .wizlords-mobile-spell-card { | |||
--wiz-mobile-spell-accent: #d66be3; | |||
} | |||
.wizlords-mobile-spellbook-divine .wizlords-mobile-spell-card { | |||
--wiz-mobile-spell-accent: #19c4eb; | |||
} | |||
.wizlords-mobile-spellbook-arcane { | |||
--wiz-mobile-spellbook-accent: #d66be3; | |||
} | |||
.wizlords-mobile-spellbook-divine { | |||
--wiz-mobile-spellbook-accent: #19c4eb; | |||
} | |||
/* Citizen mobile/tablet race culture cards. | |||
Desktop keeps the original grid; below 900px, culture/clan/subtype | |||
cards become compact expandable rows using the existing page markup. */ | |||
.skin-citizen .wizlords-culture-grid { | |||
display: block; | |||
margin: 16px auto 22px; | |||
} | |||
.skin-citizen .wizlords-culture-grid .wizlords-culture-card { | |||
display: grid; | |||
grid-template-columns: 92px minmax(0, 1fr); | |||
grid-auto-rows: auto; | |||
column-gap: 12px; | |||
box-sizing: border-box; | |||
width: 100%; | |||
max-width: 560px; | |||
min-height: 0; | |||
margin: 0 auto 10px; | |||
padding: 10px; | |||
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d); | |||
background: #1f1e1e; | |||
cursor: pointer; | |||
overflow: hidden; | |||
} | |||
.skin-citizen .wizlords-culture-card:focus { | |||
outline: 2px solid var(--wiz-content-border, #ff942d); | |||
outline-offset: 2px; | |||
} | |||
.skin-citizen .wizlords-culture-card-header, | |||
.skin-citizen .wizlords-culture-card-body { | |||
display: contents; | |||
padding: 0; | |||
border: 0; | |||
background: transparent; | |||
} | |||
.skin-citizen .wizlords-culture-card-header > :not(.wizlords-culture-card-title) { | |||
grid-row: 1 / span 2; | |||
grid-column: 1; | |||
align-self: center; | |||
justify-self: center; | |||
} | |||
.skin-citizen .wizlords-culture-card-header img { | |||
display: block; | |||
width: 88px !important; | |||
height: 88px !important; | |||
max-width: 88px !important; | |||
max-height: 88px !important; | |||
margin: 0 !important; | |||
object-fit: contain; | |||
} | |||
.skin-citizen .wizlords-culture-card-title { | |||
position: relative; | |||
grid-row: 1; | |||
grid-column: 2; | |||
align-self: end; | |||
min-width: 0; | |||
margin: 0 0 4px; | |||
padding: 0 0 4px 18px; | |||
border-bottom: 1px solid var(--wiz-content-border, #ff942d); | |||
color: var(--wiz-heading, #e7e1d4); | |||
font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif; | |||
font-size: 20px; | |||
font-weight: 700; | |||
line-height: 1.25; | |||
text-align: left; | |||
} | |||
.skin-citizen .wizlords-culture-card-title::before { | |||
content: ""; | |||
position: absolute; | |||
top: 50%; | |||
left: 1px; | |||
width: 7px; | |||
height: 7px; | |||
border-right: 2px solid var(--wiz-heading, #e7e1d4); | |||
border-bottom: 2px solid var(--wiz-heading, #e7e1d4); | |||
transform: translateY(-65%) rotate(45deg); | |||
transform-origin: 50% 50%; | |||
} | |||
.skin-citizen .wizlords-culture-card.is-open .wizlords-culture-card-title::before { | |||
transform: translateY(-35%) rotate(225deg); | |||
} | |||
.skin-citizen .wizlords-culture-card-title a { | |||
color: var(--wiz-heading, #e7e1d4); | |||
text-decoration: none; | |||
} | |||
.skin-citizen .wizlords-culture-card-body > p:first-of-type { | |||
grid-row: 2; | |||
grid-column: 2; | |||
min-width: 0; | |||
margin: 0; | |||
color: var(--color-base, #d8d3c8); | |||
font-size: 13px; | |||
font-style: italic; | |||
line-height: 1.35; | |||
} | |||
.skin-citizen .wizlords-culture-card-body > :not(p:first-of-type), | |||
.skin-citizen .wizlords-culture-card-body > p:not(:first-of-type) { | |||
display: none; | |||
} | |||
.skin-citizen .wizlords-culture-card.is-open { | |||
align-items: start; | |||
padding-bottom: 12px; | |||
} | |||
.skin-citizen .wizlords-culture-card.is-open .wizlords-culture-separator { | |||
display: block; | |||
grid-column: 1 / -1; | |||
width: 100%; | |||
height: 1px; | |||
margin: 12px 0 10px; | |||
background: var(--wiz-content-border, #ff942d); | |||
} | |||
.skin-citizen .wizlords-culture-card.is-open .wizlords-culture-card-body > :not(p:first-of-type) { | |||
display: block; | |||
grid-column: 1 / -1; | |||
} | |||
.skin-citizen .wizlords-culture-card.is-open .wizlords-culture-card-body > p:not(:first-of-type) { | |||
display: block; | |||
grid-column: 1 / -1; | |||
margin: 8px 0 0; | |||
font-style: normal; | |||
line-height: 1.45; | |||
} | |||
.skin-citizen .wizlords-culture-card.is-open .wizlords-culture-classes, | |||
.skin-citizen .wizlords-culture-card.is-open .wizlords-culture-known-for, | |||
.skin-citizen .wizlords-culture-card.is-open .wizlords-culture-suggested-class, | |||
.skin-citizen .wizlords-culture-card.is-open .wizlords-culture-class-note { | |||
margin-top: 8px; | |||
line-height: 1.45; | |||
} | |||
.skin-citizen .wizlords-culture-card.is-open .wizlords-culture-card-body ul { | |||
display: block; | |||
grid-column: 1 / -1; | |||
margin: 6px 0 0; | |||
padding-left: 24px; | |||
} | |||
.skin-citizen .wizlords-culture-card.is-open > .wizlords-available-classes-list { | |||
grid-column: 1 / -1; | |||
} | |||
.skin-citizen .wizlords-culture-card.is-open .wizlords-culture-card-body li { | |||
display: list-item; | |||
margin-bottom: 3px; | |||
} | |||
.skin-citizen .wizlords-shared-classes { | |||
max-width: 560px; | |||
margin-right: auto; | |||
margin-left: auto; | |||
} | |||
/* Race Available Classes lists: compact responsive columns. */ | |||
.skin-citizen .wizlords-available-classes-list { | |||
display: block !important; | |||
width: 100%; | |||
margin: 6px 0 0; | |||
padding-left: 22px; | |||
column-count: 1; | |||
column-gap: 1.5em; | |||
list-style: disc outside; | |||
} | |||
.skin-citizen .wizlords-culture-card .wizlords-available-classes-list { | |||
display: none !important; | |||
grid-column: 1 / -1; | |||
width: auto; | |||
min-width: 0; | |||
max-width: 100%; | |||
margin-top: 8px; | |||
margin-right: 0; | |||
margin-left: 0; | |||
column-count: 1; | |||
column-gap: 0; | |||
} | |||
.skin-citizen .wizlords-culture-card.is-open .wizlords-available-classes-list { | |||
display: block !important; | |||
} | |||
.skin-citizen .wizlords-available-classes-list.is-multicolumn { | |||
column-count: 2; | |||
} | |||
.skin-citizen .wizlords-culture-card.is-open .wizlords-available-classes-list.is-multicolumn { | |||
display: grid !important; | |||
grid-template-columns: repeat(2, minmax(0, 1fr)); | |||
gap: 2px 18px; | |||
column-count: auto; | |||
} | |||
.skin-citizen .wizlords-available-classes-list.is-drakeling-list { | |||
column-count: 2; | |||
} | |||
.skin-citizen .wizlords-available-classes-list li { | |||
display: list-item; | |||
margin: 0 0 4px; | |||
break-inside: avoid; | |||
page-break-inside: avoid; | |||
} | |||
.skin-citizen .wizlords-available-classes-list a { | |||
color: var(--wiz-link, #ff942d); | |||
text-decoration: none; | |||
} | |||
.skin-citizen .wizlords-available-classes-list a:hover { | |||
color: #ffd37a; | |||
text-decoration: none; | |||
} | |||
.skin-citizen .wizlords-shared-classes .wizlords-available-classes-list { | |||
width: auto; | |||
max-width: 100%; | |||
margin-right: auto; | |||
margin-left: auto; | |||
} | |||
/* Mobile/tablet class category accordions. | |||
These are custom controls inside the real "Classes" article section, so | |||
Citizen/MobileFrontend no longer adds a second heading chevron. */ | |||
.skin-citizen .wizlords-class-category-accordion { | |||
--wiz-class-category-accent: var(--wiz-content-border, #ff942d); | |||
margin: 18px 0 30px; | |||
} | |||
.skin-citizen .wizlords-class-category-accordion-martial { | |||
--wiz-class-category-accent: #9d7531; | |||
} | |||
.skin-citizen .wizlords-class-category-accordion-arcane { | |||
--wiz-class-category-accent: #d66be3; | |||
} | |||
.skin-citizen .wizlords-class-category-accordion-divine { | |||
--wiz-class-category-accent: #19c4eb; | |||
} | |||
.skin-citizen .wizlords-class-category-accordion-heading { | |||
position: relative; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
gap: 9px; | |||
flex-wrap: nowrap; | |||
box-sizing: border-box; | |||
width: 100%; | |||
margin: 22px 0 10px; | |||
padding: 0 0 6px; | |||
border-bottom: 1px solid rgba(255, 255, 255, 0.18); | |||
color: var(--wiz-heading, #e7e1d4); | |||
cursor: pointer; | |||
} | |||
.skin-citizen .wizlords-class-category-accordion-heading > p { | |||
display: contents; | |||
margin: 0; | |||
padding: 0; | |||
} | |||
.skin-citizen .wizlords-class-category-accordion.is-open | |||
.wizlords-class-category-accordion-heading { | |||
border-bottom-color: var(--wiz-class-category-accent); | |||
} | |||
.skin-citizen .wizlords-class-category-accordion-heading::before { | |||
content: ""; | |||
flex: 0 0 auto; | |||
width: 8px; | |||
height: 8px; | |||
border-right: 2px solid var(--wiz-heading, #e7e1d4); | |||
border-bottom: 2px solid var(--wiz-heading, #e7e1d4); | |||
transform: translateY(-2px) rotate(45deg); | |||
transform-origin: 50% 50%; | |||
} | |||
.skin-citizen .wizlords-class-category-accordion.is-open | |||
.wizlords-class-category-accordion-heading::before { | |||
transform: translateY(2px) rotate(225deg); | |||
} | |||
.skin-citizen .wizlords-class-category-accordion-title { | |||
flex: 0 1 auto; | |||
min-width: 0; | |||
color: var(--wiz-heading, #e7e1d4); | |||
font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif; | |||
font-size: 24px; | |||
font-weight: 700; | |||
line-height: 1.25; | |||
text-align: center; | |||
white-space: nowrap; | |||
} | |||
.skin-citizen .wizlords-class-category-accordion-icon { | |||
display: inline-flex; | |||
flex: 0 0 auto; | |||
align-items: center; | |||
justify-content: center; | |||
width: 32px; | |||
height: 32px; | |||
min-width: 32px; | |||
line-height: 1; | |||
vertical-align: middle; | |||
} | |||
.skin-citizen .wizlords-class-category-accordion-icon span, | |||
.skin-citizen .wizlords-class-category-accordion-icon a { | |||
display: inline-flex; | |||
align-items: center; | |||
justify-content: center; | |||
width: 100%; | |||
height: 100%; | |||
line-height: 1; | |||
} | |||
.skin-citizen .wizlords-class-category-accordion-icon img { | |||
display: block; | |||
width: 30px !important; | |||
height: 30px !important; | |||
max-width: 30px !important; | |||
max-height: 30px !important; | |||
object-fit: contain; | |||
} | |||
.skin-citizen .wizlords-class-category-accordion-body { | |||
display: none; | |||
} | |||
.skin-citizen .wizlords-class-category-accordion.is-open | |||
.wizlords-class-category-accordion-body { | |||
display: block; | |||
} | |||
.wizlords-mobile-spell-card.is-open { | |||
align-content: start; | |||
padding-top: 24px; | |||
} | |||
.wizlords-mobile-spell-card:focus { | |||
outline: 2px solid var(--wiz-content-border, #ff942d); | |||
outline-offset: 2px; | |||
} | |||
.wizlords-mobile-spell-card-icon { | |||
grid-row: 1 / span 2; | |||
grid-column: 1; | |||
align-self: center; | |||
box-sizing: border-box; | |||
width: 88px; | |||
height: 88px; | |||
overflow: hidden; | |||
padding: 0; | |||
text-align: center; | |||
} | |||
.wizlords-mobile-spell-card-icon img { | |||
display: block; | |||
width: 88px !important; | |||
height: 88px !important; | |||
max-width: 88px !important; | |||
max-height: 88px !important; | |||
object-fit: contain; | |||
} | |||
.wizlords-mobile-spell-card-title { | |||
position: relative; | |||
grid-row: 1; | |||
grid-column: 2; | |||
align-self: start; | |||
margin: 0 0 3px; | |||
padding: 0 22px 3px 18px; | |||
border-bottom: 1px solid var(--wiz-mobile-spell-accent, var(--wiz-content-border, #ff942d)); | |||
color: var(--wiz-heading, #e7e1d4); | |||
font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif; | |||
font-size: 20px; | |||
font-weight: 700; | |||
line-height: 1.25; | |||
text-align: left; | |||
} | |||
.wizlords-mobile-spell-card-title::before { | |||
content: ""; | |||
position: absolute; | |||
top: 50%; | |||
left: 1px; | |||
width: 7px; | |||
height: 7px; | |||
border-right: 2px solid var(--wiz-heading, #e7e1d4); | |||
border-bottom: 2px solid var(--wiz-heading, #e7e1d4); | |||
transform: translateY(-65%) rotate(45deg); | |||
transform-origin: 50% 50%; | |||
} | |||
.wizlords-mobile-spell-card.is-open .wizlords-mobile-spell-card-title::before { | |||
transform: translateY(-35%) rotate(225deg); | |||
} | |||
.wizlords-mobile-spell-card-summary { | |||
grid-row: 2; | |||
grid-column: 2; | |||
margin: 0; | |||
color: var(--wiz-text, #d2d2d2); | |||
font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif; | |||
font-size: 13px; | |||
font-style: italic; | |||
font-weight: 400; | |||
line-height: 1.35; | |||
} | |||
.wizlords-mobile-spell-card-rules { | |||
display: none; | |||
grid-column: 1 / -1; | |||
margin-top: 10px; | |||
padding: 10px 10px 2px; | |||
border-top: 1px solid var(--wiz-mobile-spell-accent, var(--wiz-content-border, #ff942d)); | |||
color: var(--wiz-text, #d2d2d2); | |||
background: #171717; | |||
line-height: 1.45; | |||
} | |||
.wizlords-mobile-spell-card.is-open .wizlords-mobile-spell-card-rules { | |||
display: block; | |||
} | |||
.wizlords-mobile-spell-card-rules .wizlords-spell-card-meta, | |||
.wizlords-mobile-spell-card-rules .wizlords-spell-card-section { | |||
padding: 0 0 10px; | |||
} | |||
.wizlords-mobile-spell-card-rules .wizlords-spell-card-divider { | |||
width: 55%; | |||
height: 1px; | |||
margin: 10px auto; | |||
background: var(--wiz-mobile-spell-accent, var(--wiz-content-border, #ff942d)); | |||
} | |||
.wizlords-mobile-servant-rules-divider { | |||
width: 100%; | |||
max-width: 560px; | |||
height: 1px; | |||
margin: 18px auto 14px; | |||
background: rgba(255, 255, 255, 0.18); | |||
} | |||
.wizlords-mobile-servant-rules-card { | |||
box-sizing: border-box; | |||
width: 100%; | |||
max-width: 560px; | |||
margin: 0 auto 10px; | |||
padding: 12px 14px; | |||
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d); | |||
background: #1f1e1e; | |||
color: var(--wiz-text, #d2d2d2); | |||
cursor: pointer; | |||
} | |||
.wizlords-mobile-servant-rules-card:focus { | |||
outline: 2px solid var(--wiz-content-border, #ff942d); | |||
outline-offset: 2px; | |||
} | |||
.wizlords-mobile-servant-rules-title { | |||
position: relative; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
gap: 8px; | |||
margin: 0 0 10px; | |||
padding: 0 18px 6px; | |||
border-bottom: 1px solid var(--wiz-mobile-spellbook-accent, #d66be3); | |||
color: var(--wiz-heading, #e7e1d4); | |||
font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif; | |||
font-size: 20px; | |||
font-weight: 700; | |||
line-height: 1.25; | |||
text-align: center; | |||
} | |||
.wizlords-mobile-servant-rules-title::before { | |||
content: ""; | |||
flex: 0 0 auto; | |||
width: 7px; | |||
height: 7px; | |||
border-right: 2px solid var(--wiz-heading, #e7e1d4); | |||
border-bottom: 2px solid var(--wiz-heading, #e7e1d4); | |||
transform: translateY(-2px) rotate(45deg); | |||
transform-origin: 50% 50%; | |||
} | |||
.wizlords-mobile-servant-rules-card.is-open .wizlords-mobile-servant-rules-title::before { | |||
transform: translateY(2px) rotate(225deg); | |||
} | |||
.wizlords-mobile-servant-rules-card.is-open .wizlords-mobile-servant-rules-title { | |||
margin-bottom: 10px; | |||
} | |||
.wizlords-mobile-servant-rules-content { | |||
display: none; | |||
} | |||
.wizlords-mobile-servant-rules-card.is-open .wizlords-mobile-servant-rules-content { | |||
display: block; | |||
} | |||
.wizlords-mobile-servant-rules-content .wizlords-servant-rules-grid { | |||
display: grid; | |||
grid-template-columns: 1fr; | |||
gap: 12px; | |||
padding: 0; | |||
} | |||
.wizlords-mobile-servant-rules-content .wizlords-servant-rules-section { | |||
line-height: 1.45; | |||
} | |||
.wizlords-mobile-servant-rules-content .wizlords-servant-rules-section ul { | |||
margin: 6px 0 0; | |||
padding-left: 22px; | |||
} | |||
} | |||
@media (min-width: 900px) { | |||
.wizlords-spellbooks-mobile { | |||
display: none; | |||
} | |||
.wizlords-spellbooks-desktop { | |||
display: block; | |||
} | |||
} | |||
@media (min-width: 600px) and (max-width: 899px) { | |||
.skin-citizen .wizlords-available-classes-list.is-multicolumn { | |||
column-count: 3; | |||
} | |||
.skin-citizen .wizlords-culture-card.is-open .wizlords-available-classes-list.is-multicolumn { | |||
grid-template-columns: repeat(3, minmax(0, 1fr)); | |||
column-count: auto; | |||
} | |||
.skin-citizen .wizlords-available-classes-list.is-drakeling-list { | |||
column-count: 2; | |||
} | |||
} | |||
/* Phone card layout. */ | |||
@media (max-width: 599px) { | |||
.wizlords-class-card-grid, | |||
.wizlords-spell-card-grid { | |||
grid-template-columns: 1fr; | |||
} | |||
.wizlords-servant-rules-grid { | |||
grid-template-columns: 1fr; | |||
} | |||
.wizlords-class-card-grid { | |||
display: block; | |||
margin: 12px 0 20px; | |||
} | |||
.wizlords-class-card { | |||
position: relative; | |||
display: grid; | |||
grid-template-columns: 92px minmax(0, 1fr); | |||
grid-template-rows: auto auto auto; | |||
align-content: center; | |||
gap: 0 10px; | |||
box-sizing: border-box; | |||
width: 100%; | |||
margin: 0 0 10px; | |||
padding: 8px 9px; | |||
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d); | |||
background: #1f1e1e; | |||
cursor: pointer; | |||
} | |||
.wizlords-class-card:not(.is-open) { | |||
height: 150px; | |||
overflow: hidden; | |||
} | |||
.wizlords-class-card.is-open { | |||
height: auto; | |||
align-content: start; | |||
padding-top: 24px; | |||
} | |||
.wizlords-class-card:focus { | |||
outline: 2px solid var(--wiz-content-border, #ff942d); | |||
outline-offset: 2px; | |||
} | |||
.wizlords-class-card-icon { | |||
grid-row: 1 / span 2; | |||
grid-column: 1; | |||
align-self: center; | |||
box-sizing: border-box; | |||
width: 88px; | |||
height: 88px; | |||
overflow: hidden; | |||
padding: 0; | |||
text-align: center; | |||
} | |||
.wizlords-class-card-icon span, | |||
.wizlords-class-card-icon img { | |||
display: block; | |||
width: 88px !important; | |||
height: 88px !important; | |||
max-width: 88px !important; | |||
max-height: 88px !important; | |||
object-fit: contain; | |||
} | |||
.wizlords-class-card-title { | |||
position: relative; | |||
grid-row: 1; | |||
grid-column: 2; | |||
align-self: start; | |||
margin: 0 0 3px; | |||
padding: 0 22px 3px 18px; | |||
border-bottom: 1px solid var(--wiz-class-accent, var(--wiz-content-border, #ff942d)); | |||
color: var(--wiz-heading, #e7e1d4); | |||
font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif; | |||
font-size: 20px; | |||
font-weight: 700; | |||
line-height: 1.25; | |||
text-align: left; | |||
} | |||
.wizlords-class-card-title::before { | |||
content: ""; | |||
position: absolute; | |||
top: 50%; | |||
left: 1px; | |||
width: 7px; | |||
height: 7px; | |||
border-right: 2px solid var(--wiz-heading, #e7e1d4); | |||
border-bottom: 2px solid var(--wiz-heading, #e7e1d4); | |||
transform: translateY(-65%) rotate(45deg); | |||
transform-origin: 50% 50%; | |||
} | |||
.wizlords-class-card.is-open .wizlords-class-card-title::before { | |||
transform: translateY(-35%) rotate(225deg); | |||
} | |||
.wizlords-class-card-body { | |||
display: contents; | |||
padding: 0; | |||
background: transparent; | |||
} | |||
.wizlords-class-card-summary { | |||
grid-row: 2; | |||
grid-column: 2; | |||
margin: 0; | |||
color: var(--wiz-text, #d2d2d2); | |||
font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif; | |||
font-size: 13px; | |||
font-style: italic; | |||
font-weight: 400; | |||
line-height: 1.35; | |||
display: block; | |||
overflow: visible; | |||
} | |||
.wizlords-class-card.is-open .wizlords-class-card-summary { | |||
display: block; | |||
overflow: visible; | |||
} | |||
.wizlords-class-card-divider { | |||
display: none; | |||
} | |||
.wizlords-class-card-rules { | |||
display: none; | |||
grid-column: 1 / -1; | |||
margin-top: 10px; | |||
padding: 10px 10px 2px; | |||
border-top: 1px solid var(--wiz-class-accent, var(--wiz-content-border, #ff942d)); | |||
color: var(--wiz-text, #d2d2d2); | |||
background: #171717; | |||
} | |||
.wizlords-class-card.is-open .wizlords-class-card-rules { | |||
display: block; | |||
} | |||
.wizlords-class-card-grid-martial .wizlords-class-card { | |||
--wiz-class-accent: #9d7531; | |||
} | |||
.wizlords-class-card-grid-arcane .wizlords-class-card { | |||
--wiz-class-accent: #9a3dae; | |||
} | |||
.wizlords-class-card-grid-divine .wizlords-class-card { | |||
--wiz-class-accent: #33b6cf; | |||
} | |||
} | |||
/* Citizen-specific safeguard: keep custom mobile collapsible box headings using | |||
the same clean interface typography as Citizen section headings. This is | |||
repeated here because Common.css can override equal-specificity skin rules | |||
depending on ResourceLoader order. */ | |||
.skin-citizen .mw-parser-output .wizlords-collapsible-section .wizlords-collapsible-section-title { | |||
font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif !important; | |||
font-size: 22px !important; | |||
font-weight: 700 !important; | |||
line-height: 1.3 !important; | |||
} | |||
.skin-citizen .mw-parser-output .wizlords-collapsible-section > .wizlords-collapsed-hint { | |||
font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif !important; | |||
font-size: 14px !important; | |||
font-style: normal !important; | |||
font-weight: 400 !important; | |||
line-height: 1.6 !important; | |||
} | } | ||
Latest revision as of 17:43, 19 July 2026
/*
* Wizards & Warlords shared content styling.
*
* This file is loaded by every skin. Keep reusable article typography,
* templates, cards, tables, navboxes, and other content components here.
* Skin shells and navigation belong in the relevant skin stylesheet.
*/
/* ==========================================================================
Responsive Layout Standard
--------------------------------------------------------------------------
Project-wide layout ranges:
- Phone: 0-599px
- Tablet / large phone: 600-899px
- Small desktop / landscape: 900-1199px
- Full desktop: 1200px+
Component-specific queries should use these boundaries unless a documented
intrinsic-size constraint requires an additional breakpoint.
========================================================================== */
/* ==========================================================================
Shared Content Variables
--------------------------------------------------------------------------
Skin stylesheets may override these tokens, but shared components always
have a stable dark-fantasy fallback.
========================================================================== */
:root {
--wiz-content-background: #222;
--wiz-panel-solid-background: #0f0f0f;
--wiz-content-border: #ff942d;
--wiz-text: #d2d2d2;
--wiz-link: #ff942d;
--wiz-heading: #e7e1d4;
}
/* ==========================================================================
Shared Article Typography
--------------------------------------------------------------------------
These selectors are intentionally skin-neutral and lower-specificity than
the current Vector compatibility rules. Vector therefore remains visually
unchanged while Citizen receives the same article rhythm and colours.
========================================================================== */
.mw-body-content {
color: var(--wiz-text);
font-size: 14px;
line-height: 1.6;
}
.mw-parser-output > ul,
.mw-parser-output > ol {
margin: 8px 0 12px 28px;
padding-left: 20px;
text-align: left;
}
.mw-parser-output > ul {
list-style: disc outside;
}
.mw-parser-output ul ul {
margin: 4px 0 6px 22px;
padding-left: 18px;
list-style: disc outside;
}
.mw-parser-output > ol {
list-style: decimal outside;
}
.mw-parser-output > ul > li,
.mw-parser-output > ol > li {
display: list-item;
margin-bottom: 4px;
}
.mw-parser-output ul ul > li {
display: list-item;
margin-bottom: 3px;
list-style: disc outside;
}
.mw-parser-output li::marker {
color: var(--wiz-text);
}
/* MediaWiki wraps generated headings in .mw-heading on current versions. */
.mw-parser-output .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;
}
.mw-parser-output .mw-heading2 {
margin-top: 21px;
margin-bottom: 5px;
border-bottom: 1px solid var(--wiz-content-border);
}
.mw-parser-output .mw-heading3 {
margin-top: 5px;
margin-bottom: 10px;
padding-top: 8px;
}
.mw-parser-output .mw-heading4 {
margin-top: 4px;
margin-bottom: 10px;
padding-top: 7px;
}
.mw-parser-output .mw-heading h2,
.mw-parser-output .mw-heading h3,
.mw-parser-output .mw-heading h4,
.mw-parser-output .mw-heading h5,
.mw-parser-output .mw-heading h6 {
margin: 0;
padding: 0;
border-bottom: 0;
color: var(--wiz-heading);
text-align: left;
text-decoration: none;
}
.mw-parser-output .mw-heading h2 {
font-size: 24px;
font-weight: normal;
line-height: 30px;
}
.mw-parser-output .mw-heading h3 {
font-size: 18px;
font-weight: bold;
line-height: 24px;
}
.mw-parser-output .mw-heading h4 {
font-size: 14px;
font-weight: bold;
line-height: 1.6;
}
.mw-parser-output .mw-heading h5,
.mw-parser-output .mw-heading h6 {
font-size: 15px;
font-weight: bold;
line-height: 21px;
}
.mw-parser-output .mw-heading .mw-headline,
.mw-parser-output .mw-heading a {
border-bottom: 0;
color: var(--wiz-heading);
text-decoration: none;
}
.mw-parser-output .mw-heading .mw-editsection,
.mw-parser-output .mw-heading .mw-editsection a {
color: var(--wiz-link);
font-size: 12px;
line-height: 1;
text-decoration: none;
}
/* Shared homepage navigation-list links. Descriptive text following each link
remains normal weight because only the anchor itself is emphasized. */
.wizlords-mainpage-link-list a,
.wizlords-mainpage-whatislarp-list a {
color: var(--wiz-link, #ff942d);
font-weight: normal;
text-decoration: none;
}
.wizlords-mainpage-link-list a:hover,
.wizlords-mainpage-whatislarp-list a:hover {
color: #ffd37a;
text-decoration: none;
}
/* Main Page banner.
Desktop/small-desktop uses the full single-line parchment banner. Mobile and
tablet use the transparent no-background version so the header sits cleanly
inside Citizen's narrow layout. */
.page-banner {
width: 100%;
margin: 0 auto 24px;
text-align: center;
}
.page-banner-desktop,
.page-banner-mobile {
width: 100%;
}
.page-banner-desktop {
display: block !important;
}
.page-banner-mobile {
display: none !important;
}
.page-banner figure {
display: block;
width: 100%;
max-width: 100%;
margin: 0 auto;
}
.page-banner img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
margin: 0 auto;
}
.page-banner .mw-default-size,
.page-banner .mw-file-description,
.page-banner .mw-file-element {
display: block;
max-width: 100%;
margin-right: auto;
margin-left: auto;
}
@media (max-width: 899px) {
.page-banner {
aspect-ratio: 300 / 141;
margin-bottom: 0;
background-image: url("/index.php/Special:Redirect/file/Wizlords_banner_nobg.png");
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
.page-banner-desktop {
display: none !important;
}
.page-banner-mobile {
display: none !important;
}
}
@media (min-width: 900px) {
.page-banner {
aspect-ratio: auto;
background-image: none;
}
.page-banner-desktop {
display: block !important;
}
.page-banner-mobile {
display: none !important;
}
}
/* Compatibility for an accidental nested-list wrapper on the Main Page:
*
* <ul>
* <ul class="wizlords-mainpage-whatislarp-list">...</ul>
* </ul>
*
* The outer list otherwise adds a second layer of indentation. The preferred
* markup is still a single classified <ul>.
*/
.mw-parser-output ul:has(> ul.wizlords-mainpage-whatislarp-list) {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.mw-parser-output
ul:has(> ul.wizlords-mainpage-whatislarp-list)
> ul.wizlords-mainpage-whatislarp-list {
margin-left: 0 !important;
}
/* Hide the content of the TOC when the checkbox is checked. */
/* stylelint-disable-next-line selector-class-pattern */
.toctogglecheckbox:checked ~ ul {
display: none;
}
.wiz-grid {
outline: 5px solid red !important;
}
.wiz-grid-item {
width: 100%;
}
.wiz-grid-item img {
display: block;
width: 100%;
height: auto;
border: 0;
background: transparent;
box-shadow: none;
}
.wiz-grid-text {
margin-top: 8px;
}
/* Intro text shown only while a MediaWiki collapsible section is closed. */
.wizlords-collapsed-hint {
display: none;
margin: 0;
padding: 6px 0 6px;
color: var(--wiz-text, #d2d2d2);
font-style: italic;
}
.wizlords-collapsed-hint-section.mw-collapsed > .wizlords-collapsed-hint {
display: block;
}
.wizlords-collapsed-hint-section:not(.mw-collapsed) > .wizlords-collapsed-hint {
display: none;
}
.wizlords-collapsed-hint-section ul {
margin: 6px 0 12px;
padding-left: 28px;
list-style: disc outside;
}
.wizlords-collapsed-hint-section li {
display: list-item;
margin: 0 0 3px;
list-style: disc outside;
}
.wizlords-collapsed-hint-section li::marker {
color: var(--wiz-text, #d2d2d2);
}
/* Keeps a real wiki heading available for the TOC without showing it on the page. */
.wizlords-toc-only-heading {
position: absolute;
width: 1px;
height: 0;
margin: 0;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
}
.wizlords-toc-only-heading .mw-heading,
.wizlords-toc-only-heading h2,
.wizlords-toc-only-heading h3,
.wizlords-toc-only-heading h4 {
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
.wizlords-toc-only-heading .mw-editsection {
display: none;
}
/* Reusable article sections that can be collapsed to keep long pages compact. */
.wizlords-collapsible-section {
margin: 18px 0;
padding: 8px 14px;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
background: #1f1e1e;
}
.wizlords-toc-only-heading + .wizlords-collapsible-section {
margin-top: 10px;
}
.wizlords-collapsible-section:has(+ .wizlords-toc-only-heading) {
margin-bottom: 10px;
}
.wizlords-collapsible-section-title {
padding: 0;
border-bottom: 1px solid var(--wiz-content-border, #ff942d);
color: var(--wiz-heading, #e7e1d4);
font-family: Georgia, 'Times New Roman', serif;
font-size: 24px;
font-weight: normal;
line-height: 30px;
}
.wizlords-collapsible-section .mw-collapsible-content {
padding: 6px 0 0;
}
.wizlords-collapsible-section .mw-collapsible-content > p:first-child {
margin-top: 0;
}
.wizlords-collapsible-section .mw-collapsible-content > p:last-child {
margin-bottom: 0;
}
.wizlords-collapsible-section-subheading {
margin: 14px 0 8px;
color: var(--wiz-heading, #e7e1d4);
font-size: 18px;
font-weight: bold;
line-height: 1.3;
}
.wizlords-collapsible-section-subsubheading {
margin: 12px 0 6px;
color: var(--wiz-heading, #e7e1d4);
font-weight: bold;
line-height: 1.3;
}
.wizlords-collapsible-section-divider {
width: 80%;
height: 1px;
margin: 18px auto 14px;
background: var(--wiz-race-table-divider-colour, #9d7531);
}
.wizlords-collapsible-section > .mw-collapsible-toggle {
margin: 11px 0 0 0;
color: var(--wiz-text, #d2d2d2) !important;
}
.wizlords-collapsible-section > .mw-collapsible-toggle .mw-collapsible-text,
.wizlords-collapsible-section > .mw-collapsible-toggle a {
color: var(--wiz-link, #ff942d) !important;
}
.wizlords-collapsible-section-bottom-toggle {
margin: 8px 0 0;
padding: 0;
text-align: right;
color: var(--wiz-text, #d2d2d2) !important;
cursor: pointer;
}
.wizlords-collapsible-section-bottom-toggle span,
.wizlords-collapsible-section-bottom-toggle a {
color: var(--wiz-link, #ff942d) !important;
}
/* RACE TABLE */
/* ---------- */
.wikitable.wizlords-race-table,
.wizlords-race-table {
--wiz-race-table-border-width: 1px;
--wiz-race-table-border-colour: #4d4d4d;
--wiz-race-table-divider-colour: #9d7531;
width: 100%;
border-collapse: collapse;
table-layout: fixed;
border: var(--wiz-race-table-border-width) solid var(--wiz-race-table-border-colour) !important;
background: var(--wiz-content-background, #222);
color: var(--wiz-text, #d2d2d2);
}
.wikitable.wizlords-race-table tr,
.wizlords-race-table tr {
border-color: var(--wiz-race-table-border-colour) !important;
}
.wikitable.wizlords-race-table th,
.wikitable.wizlords-race-table td,
.wizlords-race-table th,
.wizlords-race-table td {
padding: 5px 8px;
border: var(--wiz-race-table-border-width) solid var(--wiz-race-table-border-colour) !important;
background: #1f1e1e;
vertical-align: middle;
}
.wizlords-race-table th {
color: var(--wiz-heading, #e7e1d4) !important;
text-align: center;
font-weight: bold;
}
.wikitable.wizlords-race-table td.race-name,
.wizlords-race-table td.race-name {
background: #171717 !important;
text-align: center;
font-weight: bold;
white-space: nowrap;
}
.wizlords-race-table .race-icon {
display: block;
width: 100px;
height: 100px;
margin: 0 auto 6px;
object-fit: contain;
}
.wikitable.wizlords-race-table td.subculture,
.wizlords-race-table td.subculture {
background: #171717 !important;
text-align: center;
font-weight: bold;
vertical-align: middle;
}
.wizlords-race-table .subculture-icon {
display: block;
width: 45px;
height: 45px;
margin: 4px auto 4px;
object-fit: contain;
}
.wizlords-race-table .race-bonus,
.wizlords-race-table .subculture-bonus {
min-width: 280px;
}
.wizlords-race-table ul {
margin: 0;
padding-left: 20px;
list-style: disc outside;
}
.wizlords-race-table li {
display: list-item;
margin: 0 0 3px;
list-style: disc outside;
}
.wizlords-race-table li::marker {
color: var(--wiz-text, #d2d2d2);
}
.wizlords-race-table .race-divider td {
height: 8px;
padding: 0;
border: var(--wiz-race-table-border-width) solid var(--wiz-race-table-divider-colour) !important;
background: var(--wiz-race-table-divider-colour);
}
/* RACES LANDING PAGE */
/* ------------------ */
.wizlords-races-landing {
max-width: 100%;
}
.wizlords-races-landing .race-note {
margin: 14px 0 18px;
font-style: italic;
}
.wizlords-races-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 28px 44px;
margin: 26px auto 24px;
max-width: 860px;
}
.wizlords-race-link {
display: block;
width: 120px;
text-align: center;
text-decoration: none;
}
.wizlords-race-link img {
display: block;
width: 100px;
height: 100px;
margin: 0 auto 8px;
object-fit: contain;
border: 0;
background: transparent;
transition: transform 120ms ease, filter 120ms ease;
}
.wizlords-race-label,
.wizlords-race-label a {
display: block;
color: var(--wiz-link, #ff942d);
font-weight: bold;
line-height: 1.3;
text-decoration: none;
}
.wizlords-race-link:hover img {
filter: brightness(1.15);
transform: translateY(-2px);
}
.wizlords-race-link:hover .wizlords-race-label,
.wizlords-race-link:hover .wizlords-race-label a {
color: #ffd37a;
text-decoration: none;
}
/* RACE DETAIL PAGES */
/* ----------------- */
.wizlords-race-page {
max-width: 100%;
}
.hatnote,
.wizlords-race-page .hatnote {
margin: 4px 0 18px;
padding-left: 18px;
color: var(--wiz-text, #d2d2d2);
font-style: italic;
}
.hatnote a,
.wizlords-race-page .hatnote a {
color: var(--wiz-link, #ff942d);
text-decoration: none;
}
.wizlords-culture-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 14px;
margin: 18px auto 24px;
}
.wizlords-culture-card {
display: flex;
flex-direction: column;
grid-column: span 2;
min-height: 100%;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
background: #171717;
}
.wizlords-culture-grid.cultures-2 .wizlords-culture-card:nth-child(1),
.wizlords-culture-grid.cultures-4 .wizlords-culture-card:nth-child(1),
.wizlords-culture-grid.cultures-4 .wizlords-culture-card:nth-child(3) {
grid-column: 2 / span 2;
}
.wizlords-culture-grid.cultures-2 .wizlords-culture-card:nth-child(2),
.wizlords-culture-grid.cultures-4 .wizlords-culture-card:nth-child(2),
.wizlords-culture-grid.cultures-4 .wizlords-culture-card:nth-child(4) {
grid-column: 4 / span 2;
}
.wizlords-culture-grid.cultures-5 .wizlords-culture-card:nth-child(4) {
grid-column: 2 / span 2;
}
.wizlords-culture-grid.cultures-5 .wizlords-culture-card:nth-child(5) {
grid-column: 4 / span 2;
}
.wizlords-culture-grid.cultures-7 .wizlords-culture-card:nth-child(7) {
grid-column: 3 / span 2;
}
.wizlords-culture-card-header {
padding: 16px 12px 12px;
text-align: center;
border-bottom: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
}
.wizlords-culture-card-header img {
display: block;
width: 250px;
height: 250px;
max-width: 100%;
margin: 0 auto 10px;
object-fit: contain;
border: 0;
background: transparent;
}
.wizlords-culture-card-title,
.wizlords-culture-card-title a {
color: var(--wiz-link, #ff942d);
font-size: 16px;
font-weight: bold;
line-height: 1.25;
text-decoration: none;
}
.wizlords-culture-card-body {
flex: 1 1 auto;
padding: 12px;
background: #1f1e1e;
}
.wizlords-culture-card-body p {
margin: 0 0 12px;
font-style: italic;
line-height: 1.55;
}
.wizlords-culture-separator {
width: 110px;
height: 1px;
margin: 14px auto 12px;
background: var(--wiz-race-table-divider-colour, #9d7531);
}
.wizlords-shared-classes {
display: table;
width: auto;
min-width: 330px;
margin: 16px auto 22px;
padding: 10px 28px;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
background: #171717;
}
.wizlords-shared-classes-title {
margin-bottom: 5px;
color: var(--wiz-heading-colour, #f2ead7);
font-weight: bold;
text-align: center;
}
.wizlords-shared-classes ul {
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(5, auto);
grid-auto-columns: max-content;
column-gap: 42px;
width: max-content;
margin: 2px auto 0;
padding-left: 0;
list-style: disc outside;
}
.wizlords-shared-classes li {
display: list-item;
margin: 0 0 3px;
margin-left: 18px;
break-inside: avoid;
}
.wizlords-shared-classes.classes-8 ul {
grid-template-rows: repeat(4, auto);
}
.wizlords-shared-classes.classes-9 ul {
grid-template-rows: repeat(5, auto);
}
.wizlords-shared-classes.classes-4 ul {
grid-template-rows: repeat(4, auto);
}
.wizlords-shared-classes.classes-9-three ul {
grid-template-rows: repeat(3, auto);
}
.wizlords-class-compare {
display: flex;
justify-content: center;
align-items: stretch;
gap: 12px;
margin: 16px auto 22px;
}
.wizlords-class-compare .wizlords-shared-classes {
margin: 0;
min-width: 0;
}
.wizlords-shared-classes a {
color: var(--wiz-link, #ff942d);
text-decoration: none;
}
.wizlords-shared-classes a:hover {
color: #ffd37a;
text-decoration: none;
}
.wizlords-culture-classes {
margin-top: 12px;
font-weight: bold;
}
.wizlords-culture-known-for,
.wizlords-culture-suggested-class {
margin-top: 10px;
line-height: 1.45;
}
.wizlords-culture-suggested-class a {
color: var(--wiz-link, #ff942d);
text-decoration: none;
}
.wizlords-culture-class-note {
margin-top: 6px;
line-height: 1.45;
}
.wizlords-culture-card-body ul {
margin: 4px 0 0;
padding-left: 28px;
list-style: disc outside;
}
.wizlords-culture-card-body li {
display: list-item;
margin: 0 0 3px;
}
.wizlords-culture-card-body a,
.wizlords-culture-row-classes a {
color: var(--wiz-link, #ff942d);
text-decoration: none;
}
.wizlords-culture-card-body a:hover,
.wizlords-culture-row-classes a:hover {
color: #ffd37a;
text-decoration: none;
}
.wizlords-culture-list {
margin: 18px 0 24px;
}
.wizlords-culture-row {
padding: 20px 0 24px;
border-bottom: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
}
.wizlords-culture-row-feature {
display: grid;
grid-template-columns: 150px 1px minmax(0, 1fr) 300px;
align-items: center;
gap: 22px;
margin: 10px 0 18px;
}
.wizlords-culture-row-icon img {
display: block;
width: 150px;
height: 150px;
object-fit: contain;
border: 0;
background: transparent;
}
.wizlords-culture-row-divider {
width: 1px;
height: 150px;
background: var(--wiz-race-table-border-colour, #4d4d4d);
}
.wizlords-culture-row-title,
.wizlords-culture-row-title a {
color: var(--wiz-heading, #e7e1d4);
font-size: 18px;
font-weight: bold;
line-height: 1.3;
text-decoration: none;
}
.wizlords-culture-row-description {
position: relative;
margin: 0;
padding: 0 34px;
color: var(--wiz-text, #d2d2d2);
font-size: 16px;
font-style: italic;
line-height: 1.6;
}
.wizlords-culture-row-description::before,
.wizlords-culture-row-description::after {
position: absolute;
color: #555;
font-size: 42px;
line-height: 1;
}
.wizlords-culture-row-description::before {
content: "\201C";
left: 0;
top: -6px;
}
.wizlords-culture-row-description::after {
content: "\201D";
right: 0;
bottom: -18px;
}
.wizlords-culture-appearance {
box-sizing: border-box;
width: 300px;
padding: 4px;
border: 1px solid var(--wiz-race-table-divider-colour, #9d7531);
background: #171717;
}
.wizlords-culture-appearance img {
display: block;
width: 300px;
height: 138px;
object-fit: cover;
border: 0;
background: transparent;
}
.wizlords-culture-appearance-caption {
margin-top: 4px;
color: var(--wiz-text, #d2d2d2);
font-size: 12px;
line-height: 1.3;
}
.wizlords-page-image {
box-sizing: border-box;
width: min(450px, 100%);
padding: 6px;
border: 1px solid var(--wiz-content-border, #ff942d);
background: #171717;
}
.wizlords-page-image p {
margin: 0;
padding: 0;
}
.wizlords-page-image span,
.wizlords-page-image a {
display: block;
}
.wizlords-page-image.right {
float: right;
margin: 0 0 16px 24px;
}
.wizlords-page-image.left {
float: left;
margin: 0 24px 16px 0;
}
.wizlords-page-image img {
display: block;
box-sizing: border-box;
width: 100%;
aspect-ratio: 2 / 1;
height: auto;
object-fit: cover;
border: 1px solid var(--wiz-content-border, #ff942d);
background: transparent;
}
.wizlords-page-image-caption {
margin-top: 7px;
padding: 0 4px;
color: var(--wiz-text, #d2d2d2);
font-size: 12px;
line-height: 1.3;
}
.wizlords-culture-row-classes {
color: var(--wiz-text, #d2d2d2);
font-size: 14px;
}
.wizlords-culture-class-list {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(130px, max-content);
grid-template-rows: repeat(4, auto);
gap: 4px 18px;
margin: 6px 0 0;
padding-left: 28px;
list-style: disc outside;
}
.wizlords-culture-class-list li {
display: list-item;
margin: 0;
padding: 0;
}
.wizlords-culture-class-list li::marker {
color: var(--wiz-text, #d2d2d2);
}
/* Tablet and small-desktop layouts use a three-column grid. */
@media (min-width: 600px) and (max-width: 1199px) {
.wiz-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}
/* Phone layout uses two columns. */
@media (max-width: 599px) {
.wiz-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
/* CLASS OVERVIEW PAGE */
/* ------------------- */
.wizlords-classes-page {
max-width: 100%;
}
.wizlords-classes-page ul {
list-style: disc outside;
padding-left: 28px;
}
.wizlords-classes-page li {
display: list-item;
}
.wizlords-class-category-table {
width: 100%;
min-width: 0;
max-width: 640px;
margin: 18px auto 24px;
border: 0 !important;
background: #171717;
color: var(--wiz-text, #d2d2d2);
border-collapse: collapse;
table-layout: fixed;
}
.wizlords-class-category-table th,
.wizlords-class-category-table td {
box-sizing: border-box;
width: 33.333%;
min-width: 0;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d) !important;
vertical-align: top;
}
.wizlords-class-category-table th {
padding: 8px 18px !important;
background: #1f1e1e !important;
color: var(--wiz-heading, #e7e1d4) !important;
font-size: 18px;
text-align: center;
}
.wizlords-class-category-icon {
margin: 0 0 6px;
text-align: center;
}
.wizlords-class-category-icon img {
display: inline-block;
width: 110px;
height: 110px;
object-fit: contain;
}
.wizlords-class-category-table td {
padding: 8px 18px 10px 12px !important;
background: #171717 !important;
}
.wizlords-class-category-table tr:first-child {
border-bottom: 0;
}
.wizlords-class-category-table ul {
margin: 0;
padding-left: 22px;
list-style: disc outside;
}
.wizlords-class-category-table li {
display: list-item;
margin: 0 0 3px;
}
.wizlords-class-category-name {
color: var(--wiz-link, #ff942d);
font-weight: bold;
}
.wizlords-class-category-table a,
.wizlords-class-card a {
color: var(--wiz-link, #ff942d);
text-decoration: none;
}
.wizlords-class-category-mobile {
display: none;
}
/* Very narrow phones: use explicit paired category rows instead of trying to
re-map MediaWiki's desktop table, whose headers and lists are rendered in
separate table rows. This avoids horizontal scroll and keeps each category
as icon/name on the left and class list on the right. */
@media (max-width: 490px) {
.wizlords-class-category-table {
display: none !important;
}
.wizlords-class-category-mobile {
display: block;
width: 100%;
max-width: 420px;
margin: 18px auto 24px;
border: 0 !important;
overflow: visible;
background: #171717;
color: var(--wiz-text, #d2d2d2);
}
.wizlords-class-category-mobile-row {
display: grid;
grid-template-columns: 44% 56%;
align-items: stretch;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
border-bottom: 0;
}
.wizlords-class-category-mobile-row:last-child {
border-bottom: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
}
.wizlords-class-category-mobile-heading {
box-sizing: border-box;
padding: 8px 8px !important;
border-right: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
background: #1f1e1e;
color: var(--wiz-heading, #e7e1d4);
font-size: 16px;
font-weight: bold;
text-align: center;
}
.wizlords-class-category-mobile-list {
box-sizing: border-box;
display: flex;
align-items: center;
padding: 8px 10px !important;
background: #171717;
}
.wizlords-class-category-mobile .wizlords-class-category-icon {
margin-bottom: 4px;
}
.wizlords-class-category-mobile .wizlords-class-category-icon img {
width: 64px;
height: auto;
max-width: 100%;
}
.wizlords-class-category-mobile ul {
margin: 0;
padding-left: 18px;
list-style: disc outside;
}
.wizlords-class-category-mobile li {
display: list-item;
margin: 0 0 3px;
}
}
.wizlords-class-card-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 14px;
margin: 16px auto 24px;
}
.wizlords-class-card {
grid-column: span 2;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
background: #171717;
display: flex;
flex-direction: column;
scroll-margin-top: 90px;
}
.wizlords-class-card-grid.cards-5 .wizlords-class-card:nth-child(4),
.wizlords-class-card-grid.cards-4 .wizlords-class-card:nth-child(1),
.wizlords-class-card-grid.cards-4 .wizlords-class-card:nth-child(3) {
grid-column: 2 / span 2;
}
.wizlords-class-card-grid.cards-5 .wizlords-class-card:nth-child(5),
.wizlords-class-card-grid.cards-4 .wizlords-class-card:nth-child(2),
.wizlords-class-card-grid.cards-4 .wizlords-class-card:nth-child(4) {
grid-column: 4 / span 2;
}
.wizlords-class-card-title {
padding: 0 12px 10px;
color: var(--wiz-link, #ff942d);
font-weight: bold;
font-size: 18px;
line-height: 1.25;
text-align: center;
}
.wizlords-class-card-icon {
padding: 18px 12px 8px;
text-align: center;
}
.wizlords-class-card-icon img {
display: inline-block;
width: 250px;
height: 250px;
object-fit: contain;
}
.wizlords-class-card-body {
padding: 12px;
background: #1f1e1e;
line-height: 1.5;
flex: 1 1 auto;
}
.wizlords-class-card-summary {
font-style: italic;
}
.wizlords-class-card-divider {
width: 55%;
height: 1px;
margin: 14px auto 12px;
background: var(--wiz-race-table-divider-colour, #9d7531);
}
.wizlords-class-card-rules {
color: var(--wiz-text, #d2d2d2);
}
.wizlords-class-card-rules div {
margin: 0 0 4px;
}
.wizlords-class-category-accordion {
--wiz-class-category-accent: var(--wiz-content-border, #ff942d);
margin: 5px 0 14px;
}
.wizlords-class-category-accordion-martial {
--wiz-class-category-accent: #9d7531;
}
.wizlords-class-category-accordion-arcane {
--wiz-class-category-accent: #d66be3;
}
.wizlords-class-category-accordion-divine {
--wiz-class-category-accent: #19c4eb;
}
.wizlords-class-category-accordion-heading {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 4px;
padding-top: 4px;
padding-bottom: 2px;
border-bottom: 0;
color: var(--wiz-heading, #e7e1d4);
font-size: 18px;
font-weight: bold;
line-height: 24px;
}
.wizlords-class-category-accordion .wizlords-class-card-grid {
margin-top: 4px;
margin-bottom: 12px;
}
.wizlords-class-category-accordion-title {
color: var(--wiz-heading, #e7e1d4);
}
.wizlords-class-category-accordion-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
vertical-align: middle;
line-height: 1;
}
.wizlords-class-category-accordion-icon span,
.wizlords-class-category-accordion-icon a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
line-height: 1;
}
.wizlords-class-category-accordion-icon img {
display: block;
width: 28px !important;
height: 28px !important;
max-width: 28px !important;
max-height: 28px !important;
object-fit: contain;
}
.wizlords-class-category-accordion-body {
display: block;
}
/* MAGIC PAGE */
/* ---------- */
.wizlords-magic-used-by {
margin: 4px 0 14px;
padding-left: 18px;
color: var(--wiz-text, #d2d2d2);
font-style: italic;
}
.wizlords-magic-intro {
display: flex;
align-items: center;
gap: 22px;
margin: 12px 0 18px;
}
.wizlords-magic-intro-icon {
flex: 0 0 auto;
}
.wizlords-magic-intro-icon img {
display: block;
width: 100px;
height: 100px;
object-fit: contain;
}
.wizlords-magic-quote {
padding-left: 20px;
border-left: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
color: var(--wiz-text, #d2d2d2);
font-style: italic;
line-height: 1.55;
}
.wizlords-section-divider {
width: 55%;
height: 1px;
margin: 22px auto 18px;
background: var(--wiz-race-table-divider-colour, #9d7531);
}
/* SHARED STANDARD TABLE
---------------------
Opt-in colour and border treatment for ordinary custom wiki tables.
Add "wizlords-table" beside "wikitable" instead of overriding every
MediaWiki-generated wikitable. Component-specific classes continue to own
specialised widths, alignment, captions, and collapsible behaviour. */
.wikitable.wizlords-table,
.wizlords-table {
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d) !important;
border-collapse: collapse;
background: #171717 !important;
color: var(--wiz-text, #d2d2d2) !important;
}
.wikitable.wizlords-table th,
.wikitable.wizlords-table td,
.wizlords-table th,
.wizlords-table td {
padding: 8px 12px;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d) !important;
background: #171717 !important;
color: var(--wiz-text, #d2d2d2) !important;
}
.wikitable.wizlords-table th,
.wizlords-table th {
background: #1f1e1e !important;
color: var(--wiz-heading, #e7e1d4) !important;
}
.wikitable.wizlords-magic-table,
.wizlords-magic-table {
width: auto;
min-width: 520px;
max-width: 680px;
margin: 16px 0 18px;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d) !important;
border-collapse: collapse;
background: #171717;
color: var(--wiz-text, #d2d2d2);
}
.wikitable.wizlords-example-table,
.wizlords-example-table {
width: 100%;
max-width: 600px;
margin-left: 0;
margin-right: auto;
}
.wikitable.wizlords-example-table-full-heal,
.wizlords-example-table-full-heal {
max-width: 500px;
}
.wikitable.wizlords-example-table-full-heal th:first-child,
.wikitable.wizlords-example-table-full-heal td:first-child,
.wizlords-example-table-full-heal th:first-child,
.wizlords-example-table-full-heal td:first-child {
width: 34%;
}
.wikitable.wizlords-example-table-full-heal th:nth-child(2),
.wikitable.wizlords-example-table-full-heal td:nth-child(2),
.wizlords-example-table-full-heal th:nth-child(2),
.wizlords-example-table-full-heal td:nth-child(2) {
width: 66%;
}
.wikitable.wizlords-magic-table th,
.wikitable.wizlords-magic-table td,
.wizlords-magic-table th,
.wizlords-magic-table td {
padding: 8px 18px !important;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d) !important;
background: #171717 !important;
}
.wikitable.wizlords-magic-table th,
.wizlords-magic-table th {
background: #1f1e1e !important;
color: var(--wiz-heading, #e7e1d4) !important;
text-align: center;
}
.wikitable.wizlords-reward-table,
.wizlords-reward-table {
min-width: 0;
max-width: none;
width: auto;
margin-left: 0;
margin-right: auto;
border: 0 !important;
border-radius: 0;
box-shadow: none;
outline: 0;
}
.wikitable.wizlords-reward-table th,
.wikitable.wizlords-reward-table td,
.wizlords-reward-table th,
.wizlords-reward-table td {
white-space: nowrap;
}
.wikitable.wizlords-reward-table th:nth-child(2),
.wikitable.wizlords-reward-table td:nth-child(2),
.wizlords-reward-table th:nth-child(2),
.wizlords-reward-table td:nth-child(2) {
text-align: center;
}
@media (max-width: 899px) {
.wikitable.wizlords-reward-table,
.wizlords-reward-table {
margin-left: auto;
margin-right: auto;
}
}
.wikitable.wizlords-example-table caption,
.wizlords-example-table caption {
color: var(--wiz-heading, #e7e1d4);
font-weight: bold;
text-align: center;
}
.wikitable.wizlords-example-table caption .mw-collapsible-toggle,
.wizlords-example-table caption .mw-collapsible-toggle {
color: var(--wiz-text, #d2d2d2) !important;
}
.wikitable.wizlords-example-table caption .mw-collapsible-toggle .mw-collapsible-text,
.wizlords-example-table caption .mw-collapsible-toggle .mw-collapsible-text,
.wikitable.wizlords-example-table caption .mw-collapsible-toggle a,
.wizlords-example-table caption .mw-collapsible-toggle a {
color: var(--wiz-link, #ff942d) !important;
}
.wikitable.wizlords-example-table th,
.wikitable.wizlords-example-table td,
.wizlords-example-table th,
.wizlords-example-table td {
text-align: center;
}
@media (max-width: 899px) {
.wikitable.wizlords-example-table,
.wizlords-example-table {
min-width: 0;
width: 100%;
box-sizing: border-box;
table-layout: fixed;
max-width: 600px;
margin: 14px auto 18px;
border: 0 !important;
border-radius: 0;
}
.wikitable.wizlords-example-table-full-heal,
.wizlords-example-table-full-heal {
max-width: 500px;
}
.wikitable.wizlords-example-table.mw-collapsed,
.wizlords-example-table.mw-collapsed {
background: transparent !important;
}
.wikitable.wizlords-example-table caption,
.wizlords-example-table caption {
display: table-caption !important;
caption-side: top;
width: auto;
max-width: none;
box-sizing: border-box;
padding: 0;
margin: 0 0 6px;
border: 0 !important;
background: transparent !important;
white-space: nowrap;
text-align: center !important;
cursor: pointer;
}
.wikitable.wizlords-example-table.mw-collapsed caption::before,
.wizlords-example-table.mw-collapsed caption::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
margin-right: 0.35em;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-25%) rotate(45deg);
transform-origin: 50% 50%;
}
.wikitable.wizlords-example-table:not(.mw-collapsed) caption::before,
.wizlords-example-table:not(.mw-collapsed) caption::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
margin-right: 0.35em;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(10%) rotate(225deg);
transform-origin: 50% 50%;
}
.wikitable.wizlords-example-table caption .mw-collapsible-toggle,
.wizlords-example-table caption .mw-collapsible-toggle {
display: none !important;
}
.wikitable.wizlords-example-table th,
.wikitable.wizlords-example-table td,
.wizlords-example-table th,
.wizlords-example-table td {
box-sizing: border-box;
padding: 8px 6px !important;
white-space: normal;
overflow-wrap: anywhere;
word-break: normal;
}
}
@media (max-width: 599px) {
.wikitable.wizlords-example-table th,
.wikitable.wizlords-example-table td,
.wizlords-example-table th,
.wizlords-example-table td {
font-size: 13px;
line-height: 1.35;
}
}
.wikitable.wizlords-reputation-table,
.wizlords-reputation-table {
width: 100%;
max-width: none;
}
.wikitable.wizlords-reputation-table.mw-collapsed,
.wizlords-reputation-table.mw-collapsed {
width: 520px;
min-width: 520px;
max-width: 100%;
}
.wikitable.wizlords-reputation-table caption,
.wizlords-reputation-table caption {
white-space: nowrap;
}
.wikitable.wizlords-reputation-table th:nth-child(1),
.wikitable.wizlords-reputation-table td:nth-child(1),
.wikitable.wizlords-reputation-table th:nth-child(2),
.wikitable.wizlords-reputation-table td:nth-child(2),
.wizlords-reputation-table th:nth-child(1),
.wizlords-reputation-table td:nth-child(1),
.wizlords-reputation-table th:nth-child(2),
.wizlords-reputation-table td:nth-child(2) {
width: 120px;
white-space: nowrap;
}
.wikitable.wizlords-reputation-table th:nth-child(3),
.wikitable.wizlords-reputation-table td:nth-child(3),
.wizlords-reputation-table th:nth-child(3),
.wizlords-reputation-table td:nth-child(3) {
text-align: left;
}
.wikitable.wizlords-reputation-table th:nth-child(3),
.wizlords-reputation-table th:nth-child(3) {
text-align: center;
}
@media (max-width: 899px) {
.wikitable.wizlords-reputation-table,
.wizlords-reputation-table {
width: 100%;
min-width: 0;
max-width: 680px;
margin-right: auto;
margin-left: auto;
table-layout: fixed;
}
.wikitable.wizlords-reputation-table th,
.wikitable.wizlords-reputation-table td,
.wizlords-reputation-table th,
.wizlords-reputation-table td {
padding: 8px 6px !important;
white-space: normal !important;
overflow-wrap: normal !important;
word-break: normal !important;
hyphens: none;
}
.wikitable.wizlords-reputation-table th:nth-child(1),
.wikitable.wizlords-reputation-table td:nth-child(1),
.wizlords-reputation-table th:nth-child(1),
.wizlords-reputation-table td:nth-child(1) {
width: 22%;
text-align: center;
}
.wikitable.wizlords-reputation-table th:nth-child(2),
.wikitable.wizlords-reputation-table td:nth-child(2),
.wizlords-reputation-table th:nth-child(2),
.wizlords-reputation-table td:nth-child(2) {
width: 26%;
text-align: center;
}
.wikitable.wizlords-reputation-table th:nth-child(3),
.wikitable.wizlords-reputation-table td:nth-child(3),
.wizlords-reputation-table th:nth-child(3),
.wizlords-reputation-table td:nth-child(3) {
width: 52%;
text-align: left;
}
.wikitable.wizlords-reputation-table th:nth-child(3),
.wizlords-reputation-table th:nth-child(3) {
text-align: center;
}
}
@media (max-width: 380px) {
.wikitable.wizlords-reputation-table th,
.wikitable.wizlords-reputation-table td,
.wizlords-reputation-table th,
.wizlords-reputation-table td {
padding: 7px 5px !important;
font-size: 12px;
line-height: 1.35;
}
.wikitable.wizlords-reputation-table th:nth-child(1),
.wikitable.wizlords-reputation-table td:nth-child(1),
.wizlords-reputation-table th:nth-child(1),
.wizlords-reputation-table td:nth-child(1) {
width: 21%;
}
.wikitable.wizlords-reputation-table th:nth-child(2),
.wikitable.wizlords-reputation-table td:nth-child(2),
.wizlords-reputation-table th:nth-child(2),
.wizlords-reputation-table td:nth-child(2) {
width: 25%;
}
.wikitable.wizlords-reputation-table th:nth-child(3),
.wikitable.wizlords-reputation-table td:nth-child(3),
.wizlords-reputation-table th:nth-child(3),
.wizlords-reputation-table td:nth-child(3) {
width: 54%;
}
}
@media (min-width: 600px) and (max-width: 899px) {
.wikitable.wizlords-reputation-table th:nth-child(1),
.wikitable.wizlords-reputation-table td:nth-child(1),
.wizlords-reputation-table th:nth-child(1),
.wizlords-reputation-table td:nth-child(1) {
width: 18%;
}
.wikitable.wizlords-reputation-table th:nth-child(2),
.wikitable.wizlords-reputation-table td:nth-child(2),
.wizlords-reputation-table th:nth-child(2),
.wizlords-reputation-table td:nth-child(2) {
width: 22%;
}
.wikitable.wizlords-reputation-table th:nth-child(3),
.wikitable.wizlords-reputation-table td:nth-child(3),
.wizlords-reputation-table th:nth-child(3),
.wizlords-reputation-table td:nth-child(3) {
width: 60%;
}
}
.wizlords-indented-note {
margin: 8px 0 14px 28px;
color: var(--wiz-text, #d2d2d2);
}
.wizlords-spellbook {
margin: 18px 0 28px;
border: 1px solid var(--wiz-spellbook-colour, var(--wiz-link, #ff942d));
background: #1f1e1e;
}
.wizlords-spellbook-arcane {
--wiz-spellbook-colour: #c141d3;
--wiz-spell-card-divider-colour: #d66be3;
}
.wizlords-spellbook-divine {
--wiz-spellbook-colour: #089cc0;
--wiz-spell-card-divider-colour: #19c4eb;
}
.wizlords-spellbook-title {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 18px;
color: var(--wiz-heading, #e7e1d4);
font-size: 24px;
font-weight: bold;
text-align: center;
}
.wizlords-spellbook-title-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
}
.wizlords-spellbook-title-icon img {
display: block;
width: 40px;
height: 40px;
object-fit: contain;
}
.wizlords-spellbook > .mw-collapsible-toggle {
margin: 14px 18px 0 0;
color: var(--wiz-text, #d2d2d2) !important;
}
.wizlords-spellbook > .mw-collapsible-toggle .mw-collapsible-text,
.wizlords-spellbook > .mw-collapsible-toggle a {
color: var(--wiz-link, #ff942d) !important;
}
.wizlords-spellbook-bottom-toggle {
margin: 16px 0 0;
padding: 0;
text-align: right;
color: var(--wiz-text, #d2d2d2) !important;
cursor: pointer;
}
.wizlords-spellbook-bottom-toggle span,
.wizlords-spellbook-bottom-toggle a {
color: var(--wiz-link, #ff942d) !important;
}
.wizlords-spellbook .mw-collapsible-content {
padding: 0 18px 20px;
}
.wizlords-spell-category-heading {
position: relative;
margin: 0 0 3px;
padding: 0;
color: var(--wiz-heading, #e7e1d4);
font-size: 18px;
font-weight: bold;
line-height: 1.3;
}
.wizlords-spell-category-description {
margin: 0 0 12px;
color: var(--wiz-text, #d2d2d2);
font-style: italic;
font-weight: bold;
}
.wizlords-spell-card-grid + .wizlords-spell-category-heading {
margin-top: 0;
padding-top: 26px;
}
.wizlords-spell-card-grid + .wizlords-spell-category-heading::before {
content: "";
position: absolute;
top: 0;
left: 10%;
width: 80%;
height: 1px;
background: var(--wiz-spellbook-colour);
}
.wizlords-spell-card-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 14px;
margin: 16px auto 26px;
}
.wizlords-servant-rules {
margin: 16px 0 18px;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
background: #171717;
color: var(--wiz-text, #d2d2d2);
}
.wizlords-servant-rules-title {
padding: 12px 16px 4px;
color: var(--wiz-spellbook-colour);
font-size: 18px;
font-weight: bold;
line-height: 1.25;
text-align: center;
}
.wizlords-servant-rules-hint {
display: none;
padding: 0 16px 12px;
color: var(--wiz-text, #d2d2d2);
font-style: italic;
text-align: center;
}
.wizlords-servant-rules.mw-collapsed .wizlords-servant-rules-hint {
display: block;
}
.wizlords-servant-rules:not(.mw-collapsed) .wizlords-servant-rules-hint {
display: none;
}
.wizlords-servant-rules > .mw-collapsible-toggle {
margin: 12px 16px 0 0;
color: var(--wiz-text, #d2d2d2) !important;
}
.wizlords-servant-rules > .mw-collapsible-toggle .mw-collapsible-text,
.wizlords-servant-rules > .mw-collapsible-toggle a {
color: var(--wiz-link, #ff942d) !important;
}
.wizlords-servant-rules-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
padding: 0 16px 16px;
}
.wizlords-servant-rules-section {
line-height: 1.45;
}
.wizlords-servant-rules-section ul {
margin: 6px 0 0;
padding-left: 22px;
list-style: disc outside;
}
.wizlords-servant-rules-section li {
display: list-item;
margin: 0 0 3px;
}
.wizlords-spell-card {
grid-column: span 2;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
background: #171717;
color: var(--wiz-text, #d2d2d2);
}
.wizlords-spell-card-grid.cards-1 .wizlords-spell-card:nth-child(1) {
grid-column: 3 / span 2;
}
.wizlords-spell-card-grid.cards-2 .wizlords-spell-card:nth-child(1),
.wizlords-spell-card-grid.cards-4 .wizlords-spell-card:nth-child(1),
.wizlords-spell-card-grid.cards-4 .wizlords-spell-card:nth-child(3) {
grid-column: 2 / span 2;
}
.wizlords-spell-card-grid.cards-2 .wizlords-spell-card:nth-child(2),
.wizlords-spell-card-grid.cards-4 .wizlords-spell-card:nth-child(2),
.wizlords-spell-card-grid.cards-4 .wizlords-spell-card:nth-child(4) {
grid-column: 4 / span 2;
}
.wizlords-spell-card-grid.cards-5 .wizlords-spell-card:nth-child(4) {
grid-column: 2 / span 2;
}
.wizlords-spell-card-grid.cards-5 .wizlords-spell-card:nth-child(5) {
grid-column: 4 / span 2;
}
.wizlords-spell-card-title {
padding: 12px;
color: var(--wiz-spellbook-colour, var(--wiz-link, #ff942d));
font-size: 18px;
font-weight: bold;
line-height: 1.25;
text-align: center;
}
.wizlords-spell-card-meta {
padding: 0 12px;
line-height: 1.45;
}
.wizlords-spell-card-meta ul {
margin: 4px 0 0;
padding-left: 22px;
list-style: disc outside;
}
.wizlords-spell-card-meta li {
display: list-item;
margin: 0 0 3px;
}
.wizlords-spell-card-divider {
width: 55%;
height: 1px;
margin: 14px auto 12px;
background: var(--wiz-spell-card-divider-colour, var(--wiz-race-table-divider-colour, #9d7531));
}
.wizlords-spell-card-section {
padding: 0 12px 12px;
line-height: 1.45;
}
.wizlords-spell-card-section ul {
margin: 6px 0 0;
padding-left: 22px;
list-style: disc outside;
}
.wizlords-spell-card-section li {
display: list-item;
margin: 0 0 3px;
}
.wizlords-spell-card-body {
padding: 0 12px 14px;
line-height: 1.45;
}
/* WIZLORDS NAVBOX */
/* --------------- */
.ww-navbox {
clear: both;
width: 100%;
margin: 24px auto 12px;
padding: 3px;
border: 1px solid var(--wiz-content-border, #ff942d);
background: #1f1e1e;
color: var(--wiz-text, #d2d2d2);
font-size: 88%;
line-height: 1.5;
text-align: center;
box-sizing: border-box;
}
.ww-navbox-title {
padding: 4px 10px 5px;
background: #1a1a1a;
color: var(--wiz-link, #ff942d);
font-size: 16px;
font-weight: bold;
line-height: 1.35;
text-align: center;
}
.ww-navbox > .mw-collapsible-toggle {
position: relative;
z-index: 2;
float: right;
margin: 4px 8px 0 0;
color: var(--wiz-text, #d2d2d2) !important;
font-weight: bold;
}
.ww-navbox > .mw-collapsible-toggle .mw-collapsible-text,
.ww-navbox > .mw-collapsible-toggle a {
color: var(--wiz-link, #ff942d) !important;
text-decoration: none;
}
.ww-navbox > .mw-collapsible-content {
display: flex;
flex-direction: column;
clear: both;
margin: 0;
padding: 0;
}
.ww-navbox-row {
display: flex;
margin: 0;
border-top: 2px solid var(--wiz-content-background, #222);
border-left: 2px solid var(--wiz-content-background, #222);
border-right: 2px solid var(--wiz-content-background, #222);
line-height: 1.5;
}
.ww-navbox-row:first-of-type {
border-top: 2px solid var(--wiz-content-background, #222);
}
.ww-navbox-row:last-of-type {
border-bottom: 2px solid var(--wiz-content-background, #222);
}
.ww-navbox-row:nth-child(odd) {
background: #222;
}
.ww-navbox-row:nth-child(even) {
background: #252525;
}
.ww-navbox-group {
flex: 0 0 143px;
width: 143px;
padding: 4px 10px;
border-right: 2px solid var(--wiz-content-background, #222);
background: #1a1a1a;
color: var(--wiz-link, #ff942d);
font-weight: bold;
text-align: right;
box-sizing: border-box;
white-space: normal;
overflow-wrap: anywhere;
}
.ww-navbox-list {
flex: 1;
padding: 4px 10px;
text-align: left;
box-sizing: border-box;
background: inherit;
}
.ww-navbox p {
margin: 0;
}
.ww-navbox > .mw-collapsible-content > p:empty,
.ww-navbox > .mw-collapsible-content > p:has(> br:only-child) {
display: none;
}
.ww-navbox a {
color: var(--wiz-link, #ff942d) !important;
font-weight: bold;
text-decoration: none;
}
.ww-navbox a:hover {
color: #ffd37a !important;
text-decoration: none;
}
.wizlords-navbox-divider {
width: 90%;
height: 1px;
margin: 16px auto 14px;
background: #9d7531;
}
.ww-navbox-stack > .ww-navbox-title {
border-bottom: 1px solid #9d7531;
}
.ww-navbox-stack > .mw-collapsible-content > .ww-navbox {
margin: 0;
padding-top: 0;
padding-bottom: 0;
border-top: 0;
border-left: 0;
border-right: 0;
border-bottom: 0;
font-size: 100%;
}
.ww-navbox-stack > .mw-collapsible-content > .ww-navbox:first-child {
border-top: 0;
}
.ww-navbox-stack > .mw-collapsible-content > .ww-navbox:last-child {
border-bottom: 0;
}
/* The Player Guide is a desktop/tablet site index. Keep it out of the phone
layout along with the divider that belongs to it. */
@media screen and (max-width: 599px) {
.ww-navbox-stack,
.wizlords-navbox-divider {
display: none !important;
}
}
/* Phone and tablet card placement reset; the phone query below then reduces
these grids from two columns to one. */
@media (max-width: 899px) {
.wizlords-spellbooks-desktop {
display: none;
}
.wizlords-spellbooks-mobile {
display: block;
}
.wizlords-class-card-grid,
.wizlords-spell-card-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.wizlords-servant-rules-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.wizlords-class-card,
.wizlords-class-card-grid.cards-5 .wizlords-class-card:nth-child(4),
.wizlords-class-card-grid.cards-5 .wizlords-class-card:nth-child(5),
.wizlords-class-card-grid.cards-4 .wizlords-class-card:nth-child(1),
.wizlords-class-card-grid.cards-4 .wizlords-class-card:nth-child(2),
.wizlords-class-card-grid.cards-4 .wizlords-class-card:nth-child(3),
.wizlords-class-card-grid.cards-4 .wizlords-class-card:nth-child(4),
.wizlords-spell-card,
.wizlords-spell-card-grid.cards-1 .wizlords-spell-card:nth-child(1),
.wizlords-spell-card-grid.cards-2 .wizlords-spell-card:nth-child(1),
.wizlords-spell-card-grid.cards-2 .wizlords-spell-card:nth-child(2),
.wizlords-spell-card-grid.cards-4 .wizlords-spell-card:nth-child(1),
.wizlords-spell-card-grid.cards-4 .wizlords-spell-card:nth-child(2),
.wizlords-spell-card-grid.cards-4 .wizlords-spell-card:nth-child(3),
.wizlords-spell-card-grid.cards-4 .wizlords-spell-card:nth-child(4),
.wizlords-spell-card-grid.cards-5 .wizlords-spell-card:nth-child(4),
.wizlords-spell-card-grid.cards-5 .wizlords-spell-card:nth-child(5) {
grid-column: auto;
}
.wizlords-mobile-spellbook {
margin: 18px 0 30px;
}
.wizlords-mobile-spellbook-header {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
margin: 22px 0 10px;
padding-bottom: 6px;
border-bottom: 1px solid rgba(255, 255, 255, 0.18);
cursor: pointer;
}
.wizlords-mobile-spellbook-header::before {
content: "";
flex: 0 0 auto;
width: 8px;
height: 8px;
border-right: 2px solid var(--wiz-heading, #e7e1d4);
border-bottom: 2px solid var(--wiz-heading, #e7e1d4);
transform: translateY(-2px) rotate(45deg);
transform-origin: 50% 50%;
}
.wizlords-mobile-spellbook.is-open .wizlords-mobile-spellbook-header::before {
transform: translateY(2px) rotate(225deg);
}
.wizlords-mobile-spellbook.is-open .wizlords-mobile-spellbook-header {
border-bottom-color: var(--wiz-mobile-spellbook-accent, var(--wiz-content-border, #ff942d));
}
.wizlords-mobile-spellbook-header:focus {
outline: 2px solid var(--wiz-content-border, #ff942d);
outline-offset: 3px;
}
.wizlords-mobile-spellbook-title {
flex: 0 1 auto;
color: var(--wiz-heading, #e7e1d4);
font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 1.25;
text-align: center;
}
.wizlords-mobile-spellbook-icon {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
}
.wizlords-mobile-spellbook-icon img {
display: block;
width: 30px !important;
height: 30px !important;
max-width: 30px !important;
max-height: 30px !important;
object-fit: contain;
}
.wizlords-mobile-spellbook-body {
display: none;
}
.wizlords-mobile-spellbook.is-open .wizlords-mobile-spellbook-body {
display: block;
}
.wizlords-mobile-spellbook-collapse {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 28px;
margin: 14px auto 0;
padding-bottom: 3px;
border-bottom: 1px solid var(--wiz-mobile-spellbook-accent, var(--wiz-content-border, #ff942d));
color: var(--wiz-heading, #e7e1d4);
font-size: 18px;
font-weight: 700;
line-height: 1.3;
cursor: pointer;
}
.wizlords-mobile-spellbook-collapse::before {
content: "";
width: 11px;
height: 11px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(4px) rotate(225deg);
transform-origin: 50% 50%;
}
.wizlords-mobile-spellbook-collapse:focus {
outline: 2px solid var(--wiz-content-border, #ff942d);
outline-offset: 3px;
}
.wizlords-mobile-spell-category {
margin: 18px 0 22px;
}
.wizlords-mobile-spell-category-heading {
box-sizing: border-box;
width: 100%;
max-width: 560px;
margin: 0 auto 4px;
color: var(--wiz-heading, #e7e1d4);
font-size: 18px;
font-weight: 700;
line-height: 1.3;
text-align: left;
}
.wizlords-mobile-spell-category-description {
box-sizing: border-box;
width: 100%;
max-width: 560px;
margin: 0 auto 12px;
color: var(--wiz-text, #d2d2d2);
font-size: 14px;
font-style: italic;
line-height: 1.45;
}
.wizlords-mobile-spell-card {
--wiz-mobile-spell-accent: #9a3dae;
position: relative;
display: grid;
grid-template-columns: 92px minmax(0, 1fr);
grid-template-rows: auto auto auto;
align-content: center;
gap: 0 10px;
box-sizing: border-box;
width: 100%;
max-width: 560px;
min-height: 150px;
margin: 0 auto 10px;
padding: 8px 9px;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
background: #1f1e1e;
cursor: pointer;
}
.wizlords-mobile-spellbook-arcane .wizlords-mobile-spell-card {
--wiz-mobile-spell-accent: #d66be3;
}
.wizlords-mobile-spellbook-divine .wizlords-mobile-spell-card {
--wiz-mobile-spell-accent: #19c4eb;
}
.wizlords-mobile-spellbook-arcane {
--wiz-mobile-spellbook-accent: #d66be3;
}
.wizlords-mobile-spellbook-divine {
--wiz-mobile-spellbook-accent: #19c4eb;
}
/* Citizen mobile/tablet race culture cards.
Desktop keeps the original grid; below 900px, culture/clan/subtype
cards become compact expandable rows using the existing page markup. */
.skin-citizen .wizlords-culture-grid {
display: block;
margin: 16px auto 22px;
}
.skin-citizen .wizlords-culture-grid .wizlords-culture-card {
display: grid;
grid-template-columns: 92px minmax(0, 1fr);
grid-auto-rows: auto;
column-gap: 12px;
box-sizing: border-box;
width: 100%;
max-width: 560px;
min-height: 0;
margin: 0 auto 10px;
padding: 10px;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
background: #1f1e1e;
cursor: pointer;
overflow: hidden;
}
.skin-citizen .wizlords-culture-card:focus {
outline: 2px solid var(--wiz-content-border, #ff942d);
outline-offset: 2px;
}
.skin-citizen .wizlords-culture-card-header,
.skin-citizen .wizlords-culture-card-body {
display: contents;
padding: 0;
border: 0;
background: transparent;
}
.skin-citizen .wizlords-culture-card-header > :not(.wizlords-culture-card-title) {
grid-row: 1 / span 2;
grid-column: 1;
align-self: center;
justify-self: center;
}
.skin-citizen .wizlords-culture-card-header img {
display: block;
width: 88px !important;
height: 88px !important;
max-width: 88px !important;
max-height: 88px !important;
margin: 0 !important;
object-fit: contain;
}
.skin-citizen .wizlords-culture-card-title {
position: relative;
grid-row: 1;
grid-column: 2;
align-self: end;
min-width: 0;
margin: 0 0 4px;
padding: 0 0 4px 18px;
border-bottom: 1px solid var(--wiz-content-border, #ff942d);
color: var(--wiz-heading, #e7e1d4);
font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 1.25;
text-align: left;
}
.skin-citizen .wizlords-culture-card-title::before {
content: "";
position: absolute;
top: 50%;
left: 1px;
width: 7px;
height: 7px;
border-right: 2px solid var(--wiz-heading, #e7e1d4);
border-bottom: 2px solid var(--wiz-heading, #e7e1d4);
transform: translateY(-65%) rotate(45deg);
transform-origin: 50% 50%;
}
.skin-citizen .wizlords-culture-card.is-open .wizlords-culture-card-title::before {
transform: translateY(-35%) rotate(225deg);
}
.skin-citizen .wizlords-culture-card-title a {
color: var(--wiz-heading, #e7e1d4);
text-decoration: none;
}
.skin-citizen .wizlords-culture-card-body > p:first-of-type {
grid-row: 2;
grid-column: 2;
min-width: 0;
margin: 0;
color: var(--color-base, #d8d3c8);
font-size: 13px;
font-style: italic;
line-height: 1.35;
}
.skin-citizen .wizlords-culture-card-body > :not(p:first-of-type),
.skin-citizen .wizlords-culture-card-body > p:not(:first-of-type) {
display: none;
}
.skin-citizen .wizlords-culture-card.is-open {
align-items: start;
padding-bottom: 12px;
}
.skin-citizen .wizlords-culture-card.is-open .wizlords-culture-separator {
display: block;
grid-column: 1 / -1;
width: 100%;
height: 1px;
margin: 12px 0 10px;
background: var(--wiz-content-border, #ff942d);
}
.skin-citizen .wizlords-culture-card.is-open .wizlords-culture-card-body > :not(p:first-of-type) {
display: block;
grid-column: 1 / -1;
}
.skin-citizen .wizlords-culture-card.is-open .wizlords-culture-card-body > p:not(:first-of-type) {
display: block;
grid-column: 1 / -1;
margin: 8px 0 0;
font-style: normal;
line-height: 1.45;
}
.skin-citizen .wizlords-culture-card.is-open .wizlords-culture-classes,
.skin-citizen .wizlords-culture-card.is-open .wizlords-culture-known-for,
.skin-citizen .wizlords-culture-card.is-open .wizlords-culture-suggested-class,
.skin-citizen .wizlords-culture-card.is-open .wizlords-culture-class-note {
margin-top: 8px;
line-height: 1.45;
}
.skin-citizen .wizlords-culture-card.is-open .wizlords-culture-card-body ul {
display: block;
grid-column: 1 / -1;
margin: 6px 0 0;
padding-left: 24px;
}
.skin-citizen .wizlords-culture-card.is-open > .wizlords-available-classes-list {
grid-column: 1 / -1;
}
.skin-citizen .wizlords-culture-card.is-open .wizlords-culture-card-body li {
display: list-item;
margin-bottom: 3px;
}
.skin-citizen .wizlords-shared-classes {
max-width: 560px;
margin-right: auto;
margin-left: auto;
}
/* Race Available Classes lists: compact responsive columns. */
.skin-citizen .wizlords-available-classes-list {
display: block !important;
width: 100%;
margin: 6px 0 0;
padding-left: 22px;
column-count: 1;
column-gap: 1.5em;
list-style: disc outside;
}
.skin-citizen .wizlords-culture-card .wizlords-available-classes-list {
display: none !important;
grid-column: 1 / -1;
width: auto;
min-width: 0;
max-width: 100%;
margin-top: 8px;
margin-right: 0;
margin-left: 0;
column-count: 1;
column-gap: 0;
}
.skin-citizen .wizlords-culture-card.is-open .wizlords-available-classes-list {
display: block !important;
}
.skin-citizen .wizlords-available-classes-list.is-multicolumn {
column-count: 2;
}
.skin-citizen .wizlords-culture-card.is-open .wizlords-available-classes-list.is-multicolumn {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2px 18px;
column-count: auto;
}
.skin-citizen .wizlords-available-classes-list.is-drakeling-list {
column-count: 2;
}
.skin-citizen .wizlords-available-classes-list li {
display: list-item;
margin: 0 0 4px;
break-inside: avoid;
page-break-inside: avoid;
}
.skin-citizen .wizlords-available-classes-list a {
color: var(--wiz-link, #ff942d);
text-decoration: none;
}
.skin-citizen .wizlords-available-classes-list a:hover {
color: #ffd37a;
text-decoration: none;
}
.skin-citizen .wizlords-shared-classes .wizlords-available-classes-list {
width: auto;
max-width: 100%;
margin-right: auto;
margin-left: auto;
}
/* Mobile/tablet class category accordions.
These are custom controls inside the real "Classes" article section, so
Citizen/MobileFrontend no longer adds a second heading chevron. */
.skin-citizen .wizlords-class-category-accordion {
--wiz-class-category-accent: var(--wiz-content-border, #ff942d);
margin: 18px 0 30px;
}
.skin-citizen .wizlords-class-category-accordion-martial {
--wiz-class-category-accent: #9d7531;
}
.skin-citizen .wizlords-class-category-accordion-arcane {
--wiz-class-category-accent: #d66be3;
}
.skin-citizen .wizlords-class-category-accordion-divine {
--wiz-class-category-accent: #19c4eb;
}
.skin-citizen .wizlords-class-category-accordion-heading {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
flex-wrap: nowrap;
box-sizing: border-box;
width: 100%;
margin: 22px 0 10px;
padding: 0 0 6px;
border-bottom: 1px solid rgba(255, 255, 255, 0.18);
color: var(--wiz-heading, #e7e1d4);
cursor: pointer;
}
.skin-citizen .wizlords-class-category-accordion-heading > p {
display: contents;
margin: 0;
padding: 0;
}
.skin-citizen .wizlords-class-category-accordion.is-open
.wizlords-class-category-accordion-heading {
border-bottom-color: var(--wiz-class-category-accent);
}
.skin-citizen .wizlords-class-category-accordion-heading::before {
content: "";
flex: 0 0 auto;
width: 8px;
height: 8px;
border-right: 2px solid var(--wiz-heading, #e7e1d4);
border-bottom: 2px solid var(--wiz-heading, #e7e1d4);
transform: translateY(-2px) rotate(45deg);
transform-origin: 50% 50%;
}
.skin-citizen .wizlords-class-category-accordion.is-open
.wizlords-class-category-accordion-heading::before {
transform: translateY(2px) rotate(225deg);
}
.skin-citizen .wizlords-class-category-accordion-title {
flex: 0 1 auto;
min-width: 0;
color: var(--wiz-heading, #e7e1d4);
font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 1.25;
text-align: center;
white-space: nowrap;
}
.skin-citizen .wizlords-class-category-accordion-icon {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
min-width: 32px;
line-height: 1;
vertical-align: middle;
}
.skin-citizen .wizlords-class-category-accordion-icon span,
.skin-citizen .wizlords-class-category-accordion-icon a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
line-height: 1;
}
.skin-citizen .wizlords-class-category-accordion-icon img {
display: block;
width: 30px !important;
height: 30px !important;
max-width: 30px !important;
max-height: 30px !important;
object-fit: contain;
}
.skin-citizen .wizlords-class-category-accordion-body {
display: none;
}
.skin-citizen .wizlords-class-category-accordion.is-open
.wizlords-class-category-accordion-body {
display: block;
}
.wizlords-mobile-spell-card.is-open {
align-content: start;
padding-top: 24px;
}
.wizlords-mobile-spell-card:focus {
outline: 2px solid var(--wiz-content-border, #ff942d);
outline-offset: 2px;
}
.wizlords-mobile-spell-card-icon {
grid-row: 1 / span 2;
grid-column: 1;
align-self: center;
box-sizing: border-box;
width: 88px;
height: 88px;
overflow: hidden;
padding: 0;
text-align: center;
}
.wizlords-mobile-spell-card-icon img {
display: block;
width: 88px !important;
height: 88px !important;
max-width: 88px !important;
max-height: 88px !important;
object-fit: contain;
}
.wizlords-mobile-spell-card-title {
position: relative;
grid-row: 1;
grid-column: 2;
align-self: start;
margin: 0 0 3px;
padding: 0 22px 3px 18px;
border-bottom: 1px solid var(--wiz-mobile-spell-accent, var(--wiz-content-border, #ff942d));
color: var(--wiz-heading, #e7e1d4);
font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 1.25;
text-align: left;
}
.wizlords-mobile-spell-card-title::before {
content: "";
position: absolute;
top: 50%;
left: 1px;
width: 7px;
height: 7px;
border-right: 2px solid var(--wiz-heading, #e7e1d4);
border-bottom: 2px solid var(--wiz-heading, #e7e1d4);
transform: translateY(-65%) rotate(45deg);
transform-origin: 50% 50%;
}
.wizlords-mobile-spell-card.is-open .wizlords-mobile-spell-card-title::before {
transform: translateY(-35%) rotate(225deg);
}
.wizlords-mobile-spell-card-summary {
grid-row: 2;
grid-column: 2;
margin: 0;
color: var(--wiz-text, #d2d2d2);
font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif;
font-size: 13px;
font-style: italic;
font-weight: 400;
line-height: 1.35;
}
.wizlords-mobile-spell-card-rules {
display: none;
grid-column: 1 / -1;
margin-top: 10px;
padding: 10px 10px 2px;
border-top: 1px solid var(--wiz-mobile-spell-accent, var(--wiz-content-border, #ff942d));
color: var(--wiz-text, #d2d2d2);
background: #171717;
line-height: 1.45;
}
.wizlords-mobile-spell-card.is-open .wizlords-mobile-spell-card-rules {
display: block;
}
.wizlords-mobile-spell-card-rules .wizlords-spell-card-meta,
.wizlords-mobile-spell-card-rules .wizlords-spell-card-section {
padding: 0 0 10px;
}
.wizlords-mobile-spell-card-rules .wizlords-spell-card-divider {
width: 55%;
height: 1px;
margin: 10px auto;
background: var(--wiz-mobile-spell-accent, var(--wiz-content-border, #ff942d));
}
.wizlords-mobile-servant-rules-divider {
width: 100%;
max-width: 560px;
height: 1px;
margin: 18px auto 14px;
background: rgba(255, 255, 255, 0.18);
}
.wizlords-mobile-servant-rules-card {
box-sizing: border-box;
width: 100%;
max-width: 560px;
margin: 0 auto 10px;
padding: 12px 14px;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
background: #1f1e1e;
color: var(--wiz-text, #d2d2d2);
cursor: pointer;
}
.wizlords-mobile-servant-rules-card:focus {
outline: 2px solid var(--wiz-content-border, #ff942d);
outline-offset: 2px;
}
.wizlords-mobile-servant-rules-title {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 0 0 10px;
padding: 0 18px 6px;
border-bottom: 1px solid var(--wiz-mobile-spellbook-accent, #d66be3);
color: var(--wiz-heading, #e7e1d4);
font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 1.25;
text-align: center;
}
.wizlords-mobile-servant-rules-title::before {
content: "";
flex: 0 0 auto;
width: 7px;
height: 7px;
border-right: 2px solid var(--wiz-heading, #e7e1d4);
border-bottom: 2px solid var(--wiz-heading, #e7e1d4);
transform: translateY(-2px) rotate(45deg);
transform-origin: 50% 50%;
}
.wizlords-mobile-servant-rules-card.is-open .wizlords-mobile-servant-rules-title::before {
transform: translateY(2px) rotate(225deg);
}
.wizlords-mobile-servant-rules-card.is-open .wizlords-mobile-servant-rules-title {
margin-bottom: 10px;
}
.wizlords-mobile-servant-rules-content {
display: none;
}
.wizlords-mobile-servant-rules-card.is-open .wizlords-mobile-servant-rules-content {
display: block;
}
.wizlords-mobile-servant-rules-content .wizlords-servant-rules-grid {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
padding: 0;
}
.wizlords-mobile-servant-rules-content .wizlords-servant-rules-section {
line-height: 1.45;
}
.wizlords-mobile-servant-rules-content .wizlords-servant-rules-section ul {
margin: 6px 0 0;
padding-left: 22px;
}
}
@media (min-width: 900px) {
.wizlords-spellbooks-mobile {
display: none;
}
.wizlords-spellbooks-desktop {
display: block;
}
}
@media (min-width: 600px) and (max-width: 899px) {
.skin-citizen .wizlords-available-classes-list.is-multicolumn {
column-count: 3;
}
.skin-citizen .wizlords-culture-card.is-open .wizlords-available-classes-list.is-multicolumn {
grid-template-columns: repeat(3, minmax(0, 1fr));
column-count: auto;
}
.skin-citizen .wizlords-available-classes-list.is-drakeling-list {
column-count: 2;
}
}
/* Phone card layout. */
@media (max-width: 599px) {
.wizlords-class-card-grid,
.wizlords-spell-card-grid {
grid-template-columns: 1fr;
}
.wizlords-servant-rules-grid {
grid-template-columns: 1fr;
}
.wizlords-class-card-grid {
display: block;
margin: 12px 0 20px;
}
.wizlords-class-card {
position: relative;
display: grid;
grid-template-columns: 92px minmax(0, 1fr);
grid-template-rows: auto auto auto;
align-content: center;
gap: 0 10px;
box-sizing: border-box;
width: 100%;
margin: 0 0 10px;
padding: 8px 9px;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
background: #1f1e1e;
cursor: pointer;
}
.wizlords-class-card:not(.is-open) {
height: 150px;
overflow: hidden;
}
.wizlords-class-card.is-open {
height: auto;
align-content: start;
padding-top: 24px;
}
.wizlords-class-card:focus {
outline: 2px solid var(--wiz-content-border, #ff942d);
outline-offset: 2px;
}
.wizlords-class-card-icon {
grid-row: 1 / span 2;
grid-column: 1;
align-self: center;
box-sizing: border-box;
width: 88px;
height: 88px;
overflow: hidden;
padding: 0;
text-align: center;
}
.wizlords-class-card-icon span,
.wizlords-class-card-icon img {
display: block;
width: 88px !important;
height: 88px !important;
max-width: 88px !important;
max-height: 88px !important;
object-fit: contain;
}
.wizlords-class-card-title {
position: relative;
grid-row: 1;
grid-column: 2;
align-self: start;
margin: 0 0 3px;
padding: 0 22px 3px 18px;
border-bottom: 1px solid var(--wiz-class-accent, var(--wiz-content-border, #ff942d));
color: var(--wiz-heading, #e7e1d4);
font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 1.25;
text-align: left;
}
.wizlords-class-card-title::before {
content: "";
position: absolute;
top: 50%;
left: 1px;
width: 7px;
height: 7px;
border-right: 2px solid var(--wiz-heading, #e7e1d4);
border-bottom: 2px solid var(--wiz-heading, #e7e1d4);
transform: translateY(-65%) rotate(45deg);
transform-origin: 50% 50%;
}
.wizlords-class-card.is-open .wizlords-class-card-title::before {
transform: translateY(-35%) rotate(225deg);
}
.wizlords-class-card-body {
display: contents;
padding: 0;
background: transparent;
}
.wizlords-class-card-summary {
grid-row: 2;
grid-column: 2;
margin: 0;
color: var(--wiz-text, #d2d2d2);
font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif;
font-size: 13px;
font-style: italic;
font-weight: 400;
line-height: 1.35;
display: block;
overflow: visible;
}
.wizlords-class-card.is-open .wizlords-class-card-summary {
display: block;
overflow: visible;
}
.wizlords-class-card-divider {
display: none;
}
.wizlords-class-card-rules {
display: none;
grid-column: 1 / -1;
margin-top: 10px;
padding: 10px 10px 2px;
border-top: 1px solid var(--wiz-class-accent, var(--wiz-content-border, #ff942d));
color: var(--wiz-text, #d2d2d2);
background: #171717;
}
.wizlords-class-card.is-open .wizlords-class-card-rules {
display: block;
}
.wizlords-class-card-grid-martial .wizlords-class-card {
--wiz-class-accent: #9d7531;
}
.wizlords-class-card-grid-arcane .wizlords-class-card {
--wiz-class-accent: #9a3dae;
}
.wizlords-class-card-grid-divine .wizlords-class-card {
--wiz-class-accent: #33b6cf;
}
}
/* Citizen-specific safeguard: keep custom mobile collapsible box headings using
the same clean interface typography as Citizen section headings. This is
repeated here because Common.css can override equal-specificity skin rules
depending on ResourceLoader order. */
.skin-citizen .mw-parser-output .wizlords-collapsible-section .wizlords-collapsible-section-title {
font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif !important;
font-size: 22px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
}
.skin-citizen .mw-parser-output .wizlords-collapsible-section > .wizlords-collapsed-hint {
font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif !important;
font-size: 14px !important;
font-style: normal !important;
font-weight: 400 !important;
line-height: 1.6 !important;
}