MediaWiki:Common.css: Difference between revisions
MediaWiki interface page
More actions
No edit summary Tag: Manual revert |
No edit summary |
||
| (84 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 { | ||
. | 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); | color: var(--wiz-link, #ff942d); | ||
font-weight: normal; | |||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
. | .wizlords-mainpage-link-list a:hover, | ||
. | .wizlords-mainpage-whatislarp-list a:hover { | ||
color: #ffd37a; | color: #ffd37a; | ||
text-decoration: none; | 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 | |||
margin: 0; | 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: | 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 { | |||
width: | display: block; | ||
max-width: 100%; | |||
margin | 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; | |||
} | } | ||
.wizlords- | .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; | |||
margin: | |||
} | } | ||
/* Intro text shown only while a MediaWiki collapsible section is closed. */ | |||
margin: | .wizlords-collapsed-hint { | ||
color: var(--wiz-text, #d2d2d2) | display: none; | ||
margin: 0; | |||
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- | .wizlords-collapsed-hint-section:not(.mw-collapsed) > .wizlords-collapsed-hint { | ||
display: none; | |||
} | } | ||
.wizlords- | .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- | .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-toc-only-heading + .wizlords-collapsible-section { | |||
.wizlords- | margin-top: 10px; | ||
} | } | ||
.wizlords- | .wizlords-collapsible-section:has(+ .wizlords-toc-only-heading) { | ||
margin-bottom: 10px; | |||
margin | |||
} | } | ||
.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; | |||
margin: 0 | } | ||
} | |||
.wizlords- | .wizlords-collapsible-section .mw-collapsible-content > p:last-child { | ||
margin-bottom: 0; | |||
} | } | ||
.wizlords- | .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- | .wizlords-collapsible-section-divider { | ||
margin: 14px | 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; | |||
} | } | ||
.wizlords- | .wizlords-collapsible-section > .mw-collapsible-toggle .mw-collapsible-text, | ||
.wizlords-collapsible-section > .mw-collapsible-toggle a { | |||
color: var(--wiz-link, #ff942d) !important; | |||
} | } | ||
.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: var(--wiz-link, #ff942d) !important; | |||
color: var(--wiz-link, #ff942d) | |||
} | } | ||
.wizlords-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); | |||
} | |||
. | .wikitable.wizlords-race-table tr, | ||
.wizlords-race- | .wizlords-race-table tr { | ||
color: | 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- | .wizlords-race-table th { | ||
color: var(--wiz-heading, #e7e1d4) !important; | |||
text-align: center; | |||
color: var(--wiz- | font-weight: bold; | ||
font- | |||
} | } | ||
. | .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; | |||
margin- | width: 100px; | ||
height: 100px; | |||
margin: 0 auto 6px; | |||
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; | |||
} | } | ||
. | .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: | display: list-item; | ||
margin: 0 0 3px; | |||
list-style: disc outside; | |||
} | } | ||
.wizlords-race- | .wizlords-race-table li::marker { | ||
color: var(--wiz-text, #d2d2d2); | color: var(--wiz-text, #d2d2d2); | ||
} | } | ||
.wizlords-race- | .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); | |||
} | } | ||
.wizlords- | /* RACES LANDING PAGE */ | ||
/* ------------------ */ | |||
.wizlords-races-landing { | |||
max-width: 100%; | |||
} | } | ||
.wizlords-race- | .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: | display: block; | ||
width: 120px; | |||
text-align: center; | |||
text-decoration: none; | |||
} | } | ||
.wizlords- | .wizlords-race-link img { | ||
display: | display: block; | ||
width: 100px; | |||
height: 100px; | |||
margin: 0 auto 8px; | |||
border: | object-fit: contain; | ||
background: | border: 0; | ||
background: transparent; | |||
transition: transform 120ms ease, filter 120ms ease; | |||
} | } | ||
.wizlords- | .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- | .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; | |||
} | } | ||
/* RACE DETAIL PAGES */ | |||
/* ----------------- */ | |||
.wizlords-race-page { | |||
max-width: 100%; | |||
} | } | ||
.wizlords- | .hatnote, | ||
.wizlords-race-page .hatnote { | |||
margin: 4px 0 18px; | |||
padding-left: 18px; | |||
color: var(--wiz-text, #d2d2d2); | |||
font-style: italic; | |||
} | } | ||
.wizlords- | .hatnote a, | ||
.wizlords-race-page .hatnote a { | |||
color: var(--wiz-link, #ff942d); | |||
text-decoration: none; | |||
} | } | ||
.wizlords-culture- | .wizlords-culture-grid { | ||
display: | display: grid; | ||
grid-template-columns: repeat(6, minmax(0, 1fr)); | |||
gap: 14px; | |||
margin: 18px auto 24px; | |||
margin: | |||
} | } | ||
.wizlords-culture-card | .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-card- | .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-card- | .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- | .wizlords-culture-grid.cultures-5 .wizlords-culture-card:nth-child(4) { | ||
grid-column: 2 / span 2; | |||
} | } | ||
.wizlords- | .wizlords-culture-grid.cultures-5 .wizlords-culture-card:nth-child(5) { | ||
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: | display: block; | ||
margin: 0 | width: 250px; | ||
height: 250px; | |||
max-width: 100%; | |||
margin: 0 auto 10px; | |||
object-fit: contain; | |||
border: 0; | |||
background: transparent; | |||
} | } | ||
.wizlords- | .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- | .wizlords-culture-card-body { | ||
flex: 1 1 auto; | |||
padding: 12px; | |||
background: #1f1e1e; | |||
} | } | ||
.wizlords- | .wizlords-culture-card-body p { | ||
margin: 0 0 12px; | |||
font-style: italic; | |||
line-height: 1.55; | |||
} | } | ||
.wizlords- | .wizlords-culture-separator { | ||
width: 110px; | |||
height: 1px; | |||
margin: 14px auto 12px; | |||
background: var(--wiz-race-table-divider-colour, #9d7531); | |||
} | } | ||
.wizlords- | .wizlords-shared-classes { | ||
display: | display: table; | ||
width: auto; | |||
min-width: 330px; | |||
margin: 16px auto 22px; | margin: 16px auto 22px; | ||
padding: 10px 28px; | |||
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d); | |||
background: #171717; | |||
} | } | ||
.wizlords-shared-classes-title { | |||
margin: | margin-bottom: 5px; | ||
color: var(--wiz-heading-colour, #f2ead7); | |||
font-weight: bold; | |||
text-align: center; | |||
} | } | ||
.wizlords-shared-classes | .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 | .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); | |||
} | } | ||
.wizlords- | .wizlords-class-compare { | ||
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-link, #ff942d); | ||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
.wizlords- | .wizlords-shared-classes a:hover { | ||
color: #ffd37a; | color: #ffd37a; | ||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
.wizlords-culture- | .wizlords-culture-classes { | ||
margin: | margin-top: 12px; | ||
font-weight: bold; | |||
} | } | ||
.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-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- | .wizlords-culture-card-body a, | ||
.wizlords-culture-row- | .wizlords-culture-row-classes a { | ||
color: var(--wiz- | color: var(--wiz-link, #ff942d); | ||
text-decoration: none; | 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; | |||
} | } | ||
.wizlords-culture-row | .wizlords-culture-row { | ||
padding: 20px 0 24px; | |||
border-bottom: 1px solid var(--wiz-race-table-border-colour, #4d4d4d); | |||
} | } | ||
.wizlords-culture-row- | .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- | .wizlords-culture-row-icon img { | ||
display: block; | display: block; | ||
width: | width: 150px; | ||
height: | height: 150px; | ||
object-fit: | object-fit: contain; | ||
border: 0; | border: 0; | ||
background: transparent; | background: transparent; | ||
} | } | ||
.wizlords-culture- | .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; | margin: 0; | ||
padding: 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- | .wizlords-culture-row-description::after { | ||
position: absolute; | |||
color: #555; | |||
font-size: 42px; | |||
line-height: 1; | |||
} | } | ||
.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; | box-sizing: border-box; | ||
width: | width: 300px; | ||
padding: 4px; | |||
height: | border: 1px solid var(--wiz-race-table-divider-colour, #9d7531); | ||
object-fit: cover; | background: #171717; | ||
border: | } | ||
.wizlords-culture-appearance img { | |||
display: block; | |||
width: 300px; | |||
height: 138px; | |||
object-fit: cover; | |||
border: 0; | |||
background: transparent; | background: transparent; | ||
} | } | ||
.wizlords- | .wizlords-culture-appearance-caption { | ||
margin-top: | margin-top: 4px; | ||
color: var(--wiz-text, #d2d2d2); | color: var(--wiz-text, #d2d2d2); | ||
font-size: 12px; | font-size: 12px; | ||
| Line 888: | Line 924: | ||
} | } | ||
.wizlords- | .wizlords-page-image { | ||
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; | |||
padding: 0; | |||
} | |||
margin: | |||
padding | |||
} | |||
.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-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-classes | .wizlords-culture-row-classes { | ||
color: var(--wiz-text, #d2d2d2); | |||
font-size: 14px; | |||
} | } | ||
.wizlords- | .wizlords-culture-class-list { | ||
display: 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-culture-class-list li::marker { | |||
color: var(--wiz-text, #d2d2d2); | 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- | .wizlords-classes-page li { | ||
display: list-item; | |||
} | } | ||
.wizlords-class-category-table | .wizlords-class-category-table { | ||
border- | 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 | .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 | .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- | .wizlords-class-category-icon { | ||
margin: 0 0 6px; | |||
text-align: center; | |||
} | } | ||
.wizlords-class-category- | .wizlords-class-category-icon img { | ||
display: inline-block; | |||
width: 110px; | |||
height: 110px; | |||
object-fit: contain; | |||
} | } | ||
.wizlords-class- | .wizlords-class-category-table td { | ||
padding: 8px 18px 10px 12px !important; | |||
background: #171717 !important; | |||
} | } | ||
.wizlords-class- | .wizlords-class-category-table tr:first-child { | ||
border-bottom: 0; | |||
} | |||
} | |||
.wizlords-class- | .wizlords-class-category-table ul { | ||
margin: 0; | |||
padding-left: 22px; | |||
list-style: disc outside; | |||
} | } | ||
.wizlords-class- | .wizlords-class-category-table li { | ||
display: list-item; | |||
margin: 0 0 3px; | |||
} | } | ||
.wizlords-class- | .wizlords-class-category-name { | ||
color: var(--wiz-link, #ff942d); | color: var(--wiz-link, #ff942d); | ||
font-weight: bold; | font-weight: bold; | ||
} | } | ||
.wizlords-class-card | .wizlords-class-category-table a, | ||
.wizlords-class-card a { | |||
text- | color: var(--wiz-link, #ff942d); | ||
text-decoration: none; | |||
} | } | ||
.wizlords-class- | .wizlords-class-category-mobile { | ||
display: | display: none; | ||
} | } | ||
.wizlords-class- | /* 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- | .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- | .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- | .wizlords-class-category-mobile-row:last-child { | ||
color: var(--wiz- | 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- | .wizlords-class-category-mobile .wizlords-class-category-icon img { | ||
width: 64px; | |||
} | height: auto; | ||
max-width: 100%; | |||
} | |||
.wizlords-class-category-mobile ul { | |||
margin: 0; | |||
.wizlords- | 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; | |||
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-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; | |||
padding: 8px | |||
} | } | ||
.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 { | |||
.wizlords- | 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- | .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: block; | |||
} | } | ||
.wizlords- | /* MAGIC PAGE */ | ||
- | /* ---------- */ | ||
--wiz- | .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; | display: flex; | ||
align-items: center; | align-items: center; | ||
gap: 22px; | |||
gap: | margin: 12px 0 18px; | ||
} | |||
.wizlords-magic-intro-icon { | |||
flex: 0 0 auto; | |||
} | } | ||
.wizlords- | .wizlords-magic-intro-icon img { | ||
display: block; | display: block; | ||
width: | width: 100px; | ||
height: | height: 100px; | ||
object-fit: contain; | object-fit: contain; | ||
} | } | ||
.wizlords- | .wizlords-magic-quote { | ||
padding-left: 20px; | |||
color: var(--wiz-text, #d2d2d2) | border-left: 1px solid var(--wiz-race-table-border-colour, #4d4d4d); | ||
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); | |||
} | } | ||
.wizlords- | /* 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; | color: var(--wiz-text, #d2d2d2) !important; | ||
} | } | ||
.wizlords- | .wikitable.wizlords-table th, | ||
.wizlords- | .wikitable.wizlords-table td, | ||
color: var(--wiz- | .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; | |||
} | } | ||
.wizlords- | .wikitable.wizlords-table th, | ||
.wizlords-table th { | |||
background: #1f1e1e !important; | |||
color: var(--wiz-heading, #e7e1d4) !important; | |||
} | } | ||
.wizlords- | .wikitable.wizlords-magic-table, | ||
.wizlords-magic-table { | |||
margin: 0 | width: auto; | ||
min-width: 520px; | |||
color: var(--wiz- | 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; | |||
} | } | ||
.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%; | |||
width: | |||
} | } | ||
.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; | |||
background: # | color: var(--wiz-heading, #e7e1d4) !important; | ||
color: var(--wiz- | 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; | |||
} | |||
@media (max-width: 899px) { | |||
.wikitable.wizlords-reward-table, | |||
.wizlords-reward-table { | |||
margin-left: auto; | |||
margin-right: auto; | |||
} | |||
} | } | ||
.wizlords- | .wikitable.wizlords-example-table caption, | ||
.wizlords-example-table caption { | |||
color: var(--wiz-heading, #e7e1d4); | |||
font-weight: bold; | |||
text-align: center; | |||
} | } | ||
.wizlords- | .wikitable.wizlords-example-table caption .mw-collapsible-toggle, | ||
.wizlords-example-table caption .mw-collapsible-toggle { | |||
color: var(--wiz-text, #d2d2d2) !important; | color: var(--wiz-text, #d2d2d2) !important; | ||
} | } | ||
.wizlords- | .wikitable.wizlords-example-table caption .mw-collapsible-toggle .mw-collapsible-text, | ||
.wizlords- | .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; | color: var(--wiz-link, #ff942d) !important; | ||
} | } | ||
.wizlords- | .wikitable.wizlords-example-table th, | ||
.wikitable.wizlords-example-table td, | |||
.wizlords-example-table th, | |||
.wizlords-example-table td { | |||
text-align: center; | |||
} | } | ||
.wizlords- | @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; | |||
} | |||
.wizlords- | .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; | |||
} | |||
} | } | ||
.wizlords- | @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; | |||
} | |||
} | } | ||
.wizlords- | .wikitable.wizlords-reputation-table, | ||
.wizlords-reputation-table { | |||
width: 100%; | |||
max-width: none; | |||
} | } | ||
.wizlords- | .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 { | |||
.wizlords- | white-space: nowrap; | ||
} | } | ||
.wizlords- | .wikitable.wizlords-reputation-table th:nth-child(1), | ||
.wizlords- | .wikitable.wizlords-reputation-table td:nth-child(1), | ||
.wizlords- | .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; | |||
} | } | ||
.wizlords- | .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; | |||
} | } | ||
.wizlords- | .wikitable.wizlords-reputation-table th:nth-child(3), | ||
.wizlords-reputation-table th:nth-child(3) { | |||
text-align: center; | |||
} | } | ||
.wizlords- | @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; | |||
} | |||
.wizlords- | .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; | |||
} | |||
.wizlords- | .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; | |||
} | |||
.wizlords- | .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; | |||
} | |||
.wizlords- | .wikitable.wizlords-reputation-table th:nth-child(3), | ||
.wizlords-reputation-table th:nth-child(3) { | |||
text-align: center; | |||
} | |||
} | } | ||
.wizlords- | @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; | |||
} | |||
.wizlords- | .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%; | |||
} | |||
} | } | ||
.wizlords- | @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- | .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; | |||
margin: | |||
border: 1px solid var(--wiz- | |||
} | } | ||
. | .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; | |||
} | |||
color: var(--wiz- | .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; | 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: | display: block; | ||
width: 40px; | |||
height: 40px; | |||
object-fit: contain; | |||
} | } | ||
. | .wizlords-spellbook > .mw-collapsible-toggle { | ||
margin: 14px 18px 0 0; | |||
margin: 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: | padding: 0; | ||
color: var(--wiz-heading, #e7e1d4); | |||
font-size: 18px; | |||
font-weight: bold; | 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: 0; | 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; | |||
text | border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d); | ||
background: #171717; | |||
color: var(--wiz-text, #d2d2d2); | |||
} | } | ||
.wizlords- | .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; | |||
} | } | ||
@media (max-width: 900px) { | .wizlords-servant-rules > .mw-collapsible-toggle .mw-collapsible-text, | ||
.wizlords-class-card-grid, | .wizlords-servant-rules > .mw-collapsible-toggle a { | ||
.wizlords-spell-card-grid { | color: var(--wiz-link, #ff942d) !important; | ||
grid-template-columns: repeat(2, minmax(0, 1fr)); | } | ||
} | |||
.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- | .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; | |||
} | } | ||