MediaWiki:Common.css: Difference between revisions
MediaWiki interface page
More actions
No edit summary |
No edit summary |
||
| (30 intermediate revisions by the same user not shown) | |||
| Line 48: | Line 48: | ||
.mw-parser-output > ul, | .mw-parser-output > ul, | ||
.mw-parser-output | .mw-parser-output > ol { | ||
margin: 8px 0 12px 28px; | margin: 8px 0 12px 28px; | ||
padding-left: 20px; | padding-left: 20px; | ||
| Line 56: | Line 54: | ||
} | } | ||
.mw-parser-output | .mw-parser-output > ul { | ||
list-style: disc outside; | list-style: disc outside; | ||
} | } | ||
.mw-parser-output | .mw-parser-output ul ul { | ||
margin: 4px 0 6px 22px; | margin: 4px 0 6px 22px; | ||
padding-left: 18px; | padding-left: 18px; | ||
| Line 68: | Line 64: | ||
} | } | ||
.mw-parser-output | .mw-parser-output > ol { | ||
list-style: decimal outside; | list-style: decimal outside; | ||
} | } | ||
.mw-parser-output > ul > li, | .mw-parser-output > ul > li, | ||
.mw-parser-output | .mw-parser-output > ol > li { | ||
display: list-item; | display: list-item; | ||
margin-bottom: 4px; | margin-bottom: 4px; | ||
} | } | ||
.mw-parser-output | .mw-parser-output ul ul > li { | ||
display: list-item; | display: list-item; | ||
margin-bottom: 3px; | margin-bottom: 3px; | ||
| Line 318: | Line 310: | ||
} | } | ||
/* | /* Intro text shown only while a MediaWiki collapsible section is closed. */ | ||
.wizlords-collapsed-hint { | |||
display: none; | |||
. | margin: 0; | ||
padding: 6px 0 6px; | |||
margin: 0 | |||
color: var(--wiz-text, #d2d2d2); | 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; | |||
margin: 0; | padding-left: 28px; | ||
list-style: disc outside; | |||
} | } | ||
. | .wizlords-collapsed-hint-section li { | ||
display: list-item; | |||
display: | margin: 0 0 3px; | ||
margin: 0 | list-style: disc outside; | ||
} | } | ||
. | .wizlords-collapsed-hint-section li::marker { | ||
color: var(--wiz-text, #d2d2d2); | color: var(--wiz-text, #d2d2d2); | ||
} | } | ||
/* Keeps a real wiki heading available for the TOC without showing it on the page. */ | |||
.toc- | .wizlords-toc-only-heading { | ||
position: absolute; | |||
width: 1px; | |||
height: 0; | |||
margin: 0; | margin: 0; | ||
padding: 0; | padding: 0; | ||
overflow: hidden; | |||
clip-path: inset(50%); | |||
} | } | ||
.toc- | .wizlords-toc-only-heading .mw-heading, | ||
.toc- | .wizlords-toc-only-heading h2, | ||
.wizlords-toc-only-heading h3, | |||
margin: 0; | .wizlords-toc-only-heading h4 { | ||
padding: 0; | height: 0 !important; | ||
margin: 0 !important; | |||
padding: 0 !important; | |||
border: 0 !important; | |||
} | } | ||
.toc- | .wizlords-toc-only-heading .mw-editsection { | ||
. | display: none; | ||
} | } | ||
. | /* Reusable article sections that can be collapsed to keep long pages compact. */ | ||
. | .wizlords-collapsible-section { | ||
margin | margin: 18px 0; | ||
padding | padding: 8px 14px; | ||
border | border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d); | ||
background: #1f1e1e; | |||
} | } | ||
.toc- | .wizlords-toc-only-heading + .wizlords-collapsible-section, | ||
. | .wizlords-collapsible-section + .wizlords-collapsible-section { | ||
margin- | margin-top: 10px; | ||
} | } | ||
. | .wizlords-collapsible-section:has(+ .wizlords-toc-only-heading), | ||
. | .wizlords-collapsible-section:has(+ .wizlords-collapsible-section) { | ||
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; | |||
margin: 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- | .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; | |||
margin: 0 0 | color: var(--wiz-text, #d2d2d2) !important; | ||
} | } | ||
.wizlords- | .wizlords-collapsible-section > .mw-collapsible-toggle .mw-collapsible-text, | ||
color: var(--wiz- | .wizlords-collapsible-section > .mw-collapsible-toggle a { | ||
color: var(--wiz-link, #ff942d) !important; | |||
} | } | ||
.wizlords-collapsible-section-bottom-toggle { | |||
.wizlords- | margin: 8px 0 0; | ||
padding: 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; | |||
} | } | ||
/* IMPORTANT SECTION | |||
----------------- | |||
Permanently open highlighted information using the established article-box | |||
appearance without any collapsible classes, controls, or JavaScript. */ | |||
.wizlords-important-section { | |||
.wizlords- | |||
margin: 18px 0; | margin: 18px 0; | ||
padding: 8px 14px; | padding: 8px 14px; | ||
| Line 510: | Line 464: | ||
} | } | ||
.wizlords-toc-only-heading + .wizlords- | .wizlords-toc-only-heading + .wizlords-important-section { | ||
margin-top: 10px; | margin-top: 10px; | ||
} | } | ||
.wizlords- | .wizlords-important-section-title { | ||
padding: 0; | padding: 0; | ||
border-bottom: 1px solid var(--wiz-content-border, #ff942d); | border-bottom: 1px solid var(--wiz-content-border, #ff942d); | ||
| Line 528: | Line 478: | ||
} | } | ||
.wizlords- | .wizlords-important-section-content { | ||
padding: 6px 0 0; | padding: 6px 0 0; | ||
} | } | ||
.wizlords- | .wizlords-important-section-content > p:first-child { | ||
margin-top: 0; | margin-top: 0; | ||
} | } | ||
.wizlords- | .wizlords-important-section-content > p:last-child { | ||
margin-bottom: 0; | margin-bottom: 0; | ||
} | } | ||
.wizlords- | /* 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); | |||
} | } | ||
.wizlords- | .wikitable.wizlords-race-table tr, | ||
.wizlords-race-table tr { | |||
border-color: var(--wiz-race-table-border-colour) !important; | |||
} | } | ||
.wizlords- | .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- | .wizlords-race-table th { | ||
color: var(--wiz-heading, #e7e1d4) !important; | |||
color: var(--wiz- | text-align: center; | ||
font-weight: bold; | |||
} | } | ||
.wizlords- | .wikitable.wizlords-race-table td.race-name, | ||
.wizlords- | .wizlords-race-table td.race-name { | ||
background: #171717 !important; | |||
text-align: center; | |||
font-weight: bold; | |||
white-space: nowrap; | |||
} | } | ||
.wizlords- | .wizlords-race-table .race-icon { | ||
display: block; | |||
width: 100px; | |||
height: 100px; | |||
margin: 0 auto 6px; | |||
object-fit: contain; | |||
} | } | ||
.wizlords- | .wikitable.wizlords-race-table td.subculture, | ||
.wizlords- | .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; | |||
width: | |||
} | } | ||
.wizlords-race-table .race-bonus, | |||
.wizlords-race-table | .wizlords-race-table .subculture-bonus { | ||
min-width: 280px; | |||
} | } | ||
.wizlords-race-table ul { | |||
margin: 0; | |||
padding-left: 20px; | |||
list-style: disc outside; | |||
} | } | ||
.wizlords-race-table | .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- | .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- | /* ------------------ */ | ||
.wizlords-races-landing { | |||
max-width: 100%; | |||
} | } | ||
.wizlords- | .wizlords-races-landing .race-note { | ||
margin: 14px 0 18px; | |||
font-style: italic; | |||
margin: | |||
} | } | ||
.wizlords- | .wizlords-races-grid { | ||
display: flex; | |||
flex-wrap: wrap; | |||
justify-content: center; | |||
gap: 28px 44px; | |||
margin: 26px auto 24px; | |||
max-width: 860px; | |||
} | } | ||
.wizlords-race- | .wizlords-race-link { | ||
display: block; | |||
width: 120px; | |||
text-align: center; | |||
text-decoration: none; | |||
} | } | ||
.wizlords-race- | .wizlords-race-link img { | ||
display: | display: block; | ||
margin: 0 0 | width: 100px; | ||
height: 100px; | |||
} | margin: 0 auto 8px; | ||
object-fit: contain; | |||
border: 0; | |||
background: transparent; | |||
transition: transform 120ms ease, filter 120ms ease; | |||
} | |||
.wizlords-race- | .wizlords-race-label, | ||
color: var(--wiz- | .wizlords-race-label a { | ||
display: block; | |||
color: var(--wiz-link, #ff942d); | |||
font-weight: bold; | |||
line-height: 1.3; | |||
text-decoration: none; | |||
} | } | ||
.wizlords-race- | .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 { | |||
.wizlords- | color: #ffd37a; | ||
text-decoration: none; | |||
} | } | ||
.wizlords- | /* 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-race- | .hatnote a, | ||
.wizlords-race-page .hatnote a { | |||
color: var(--wiz-link, #ff942d); | |||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
.wizlords- | .wizlords-culture-grid { | ||
display: | display: grid; | ||
grid-template-columns: repeat(6, minmax(0, 1fr)); | |||
gap: 14px; | |||
margin: | margin: 18px auto 24px; | ||
} | } | ||
.wizlords- | .wizlords-culture-card { | ||
display: flex; | |||
display: | 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- | .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- | |||
} | } | ||
.wizlords- | .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; | |||
margin- | 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); | color: var(--wiz-link, #ff942d); | ||
font-size: 16px; | |||
font-weight: bold; | |||
line-height: 1.25; | |||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
. | .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: | width: auto; | ||
min-width: 330px; | |||
margin: 16px auto 22px; | |||
border: | padding: 10px 28px; | ||
background: | border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d); | ||
background: #171717; | |||
} | } | ||
.wizlords- | .wizlords-shared-classes-title { | ||
margin-bottom: 5px; | |||
margin: | color: var(--wiz-heading-colour, #f2ead7); | ||
font-weight: bold; | |||
color: var(--wiz- | text-align: center; | ||
font- | } | ||
} | |||
.wizlords- | .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- | .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); | |||
grid-template- | } | ||
.wizlords-shared-classes.classes-9-three ul { | |||
grid-template-rows: repeat(3, auto); | |||
} | } | ||
.wizlords- | .wizlords-class-compare { | ||
display: flex; | 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); | |||
text-decoration: none; | |||
} | } | ||
.wizlords- | .wizlords-shared-classes a:hover { | ||
color: #ffd37a; | |||
text-decoration: none; | |||
} | } | ||
.wizlords-culture- | .wizlords-culture-classes { | ||
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- | .wizlords-culture-card-body ul { | ||
.wizlords-culture- | 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); | color: var(--wiz-link, #ff942d); | ||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
.wizlords-culture-card-body | .wizlords-culture-card-body a:hover, | ||
.wizlords-culture-row-classes a:hover { | |||
color: #ffd37a; | |||
text-decoration: none; | |||
} | } | ||
.wizlords-culture- | .wizlords-culture-list { | ||
margin: 0 | margin: 18px 0 24px; | ||
} | } | ||
.wizlords-culture- | .wizlords-culture-row { | ||
padding: 20px 0 24px; | |||
border-bottom: 1px solid var(--wiz-race-table-border-colour, #4d4d4d); | |||
} | } | ||
.wizlords- | .wizlords-culture-row-feature { | ||
display: | display: grid; | ||
grid-template-columns: 150px 1px minmax(0, 1fr) 300px; | |||
align-items: center; | |||
gap: 22px; | |||
margin: 10px 0 18px; | |||
} | } | ||
.wizlords- | .wizlords-culture-row-icon img { | ||
display: block; | |||
width: 150px; | |||
height: 150px; | |||
object-fit: contain; | |||
border: 0; | |||
background: transparent; | |||
} | } | ||
.wizlords- | .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; | |||
.wizlords- | 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; | |||
width: 300px; | |||
padding: 4px; | |||
border: 1px solid var(--wiz-race-table-divider-colour, #9d7531); | |||
background: #171717; | |||
} | } | ||
.wizlords- | .wizlords-culture-appearance img { | ||
display: block; | |||
width: 300px; | |||
height: 138px; | |||
object-fit: cover; | |||
border: 0; | |||
background: transparent; | |||
} | } | ||
.wizlords- | .wizlords-culture-appearance-caption { | ||
color: # | margin-top: 4px; | ||
color: var(--wiz-text, #d2d2d2); | |||
font-size: 12px; | |||
line-height: 1.3; | |||
} | } | ||
.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; | |||
margin | padding: 0; | ||
} | } | ||
.wizlords- | .wizlords-page-image span, | ||
.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; | |||
color: var(--wiz- | padding: 0 4px; | ||
color: var(--wiz-text, #d2d2d2); | |||
font-size: 12px; | |||
line-height: 1.3; | |||
} | } | ||
.wizlords-culture-row-classes { | |||
.wizlords-culture-row-classes | color: var(--wiz-text, #d2d2d2); | ||
color: # | font-size: 14px; | ||
} | } | ||
.wizlords-culture-list { | .wizlords-culture-class-list { | ||
margin: | 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- | .wizlords-culture-class-list li { | ||
display: list-item; | |||
margin: 0; | |||
padding: 0; | |||
} | } | ||
.wizlords-culture- | .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) { | |||
width: | .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 */ | ||
width: | /* ------------------- */ | ||
.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- | .wizlords-class-category-table { | ||
width: 100%; | |||
min-width: 0; | |||
color: # | max-width: 640px; | ||
margin: 18px auto 24px; | |||
border: 0 !important; | |||
background: #171717; | |||
color: var(--wiz-text, #d2d2d2); | |||
border-collapse: collapse; | |||
table-layout: fixed; | |||
} | } | ||
.wizlords- | .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- | .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- | .wizlords-class-category-icon { | ||
margin: 0 0 6px; | |||
text-align: center; | |||
} | } | ||
.wizlords- | .wizlords-class-category-icon img { | ||
display: block; | display: inline-block; | ||
width: | width: 110px; | ||
height: | height: 110px; | ||
object-fit: | 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; | |||
border | |||
} | } | ||
.wizlords- | .wizlords-class-category-table ul { | ||
margin: 0; | margin: 0; | ||
padding: | padding-left: 22px; | ||
list-style: disc outside; | |||
} | } | ||
.wizlords- | .wizlords-class-category-table li { | ||
display: list-item; | |||
display: | margin: 0 0 3px; | ||
} | } | ||
.wizlords- | .wizlords-class-category-name { | ||
color: var(--wiz-link, #ff942d); | |||
font-weight: bold; | |||
} | } | ||
.wizlords- | .wizlords-class-category-table a, | ||
.wizlords-class-card a { | |||
color: var(--wiz-link, #ff942d); | |||
text-decoration: none; | |||
} | } | ||
.wizlords- | .wizlords-class-category-mobile { | ||
display: | 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; | |||
.wizlords- | border: 0 !important; | ||
overflow: visible; | |||
background: #171717; | |||
color: var(--wiz-text, #d2d2d2); | |||
} | |||
} | |||
.wizlords- | .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- | .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- | .wizlords-class-category-mobile .wizlords-class-category-icon { | ||
margin-bottom: 4px; | |||
} | |||
} | |||
.wizlords- | .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- | .wizlords-class-card { | ||
grid-column: span 2; | |||
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d); | |||
background: #171717; | background: #171717; | ||
display: flex; | |||
flex-direction: column; | |||
scroll-margin-top: 90px; | |||
} | } | ||
.wizlords-class- | .wizlords-class-card-grid.cards-5 .wizlords-class-card:nth-child(4), | ||
.wizlords-class- | .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- | .wizlords-class-card-title { | ||
padding: | padding: 0 12px 10px; | ||
color: var(--wiz-link, #ff942d); | |||
color: var(--wiz- | font-weight: bold; | ||
font-size: 18px; | font-size: 18px; | ||
line-height: 1.25; | |||
text-align: center; | text-align: center; | ||
} | } | ||
.wizlords-class- | .wizlords-class-card-icon { | ||
padding: 18px 12px 8px; | |||
text-align: center; | text-align: center; | ||
} | } | ||
.wizlords-class- | .wizlords-class-card-icon img { | ||
display: inline-block; | display: inline-block; | ||
width: | width: 250px; | ||
height: | height: 250px; | ||
object-fit: contain; | object-fit: contain; | ||
} | } | ||
.wizlords-class- | .wizlords-class-card-body { | ||
padding: | padding: 12px; | ||
background: # | background: #1f1e1e; | ||
line-height: 1.5; | |||
flex: 1 1 auto; | |||
} | } | ||
.wizlords-class- | .wizlords-class-card-summary { | ||
font-style: italic; | |||
} | } | ||
.wizlords-class- | .wizlords-class-card-divider { | ||
width: 55%; | |||
height: 1px; | |||
margin: 14px auto 12px; | |||
background: var(--wiz-race-table-divider-colour, #9d7531); | |||
} | } | ||
.wizlords-class- | .wizlords-class-card-rules { | ||
color: var(--wiz-text, #d2d2d2); | |||
} | } | ||
.wizlords-class- | .wizlords-class-card-rules div { | ||
margin: 0 0 4px; | |||
} | } | ||
.wizlords-class-category- | .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- | .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- | .wizlords-magic-intro { | ||
display: | display: flex; | ||
align-items: center; | |||
gap: | gap: 22px; | ||
margin: | margin: 12px 0 18px; | ||
} | } | ||
.wizlords- | .wizlords-magic-intro-icon { | ||
flex: 0 0 auto; | |||
} | } | ||
.wizlords- | .wizlords-magic-intro-icon img { | ||
display: block; | |||
width: 100px; | |||
height: 100px; | |||
object-fit: contain; | |||
} | } | ||
.wizlords- | .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- | .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; | |||
} | } | ||
.wizlords- | .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; | |||
} | } | ||
.wizlords- | .wikitable.wizlords-table th, | ||
.wizlords-table th { | |||
background: #1f1e1e; | 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, | ||
width: | .wizlords-example-table { | ||
width: 100%; | |||
margin: | 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, | ||
--wiz- | .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, | ||
--wiz- | .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; | |||
} | |||
} | } | ||
.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; | |||
} | } | ||
.wikitable.wizlords-example-table caption .mw-collapsible-toggle .mw-collapsible-text, | |||
.wizlords-example-table caption .mw-collapsible-toggle .mw-collapsible-text, | |||
.wizlords- | .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- | |||
} | } | ||
.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; | |||
} | |||
.wizlords- | .wikitable.wizlords-example-table-full-heal, | ||
.wizlords-example-table-full-heal { | |||
max-width: 500px; | |||
} | |||
} | |||
.wizlords- | .wikitable.wizlords-example-table.mw-collapsed, | ||
.wizlords-example-table.mw-collapsed { | |||
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- | .wikitable.wizlords-example-table.mw-collapsed caption::before, | ||
.wizlords- | .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, | .wikitable.wizlords-example-table:not(.mw-collapsed) caption::before, | ||
.wizlords-example-table { | .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- | .wikitable.wizlords-example-table th, | ||
.wizlords-example-table- | .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; | |||
} | |||
} | } | ||
.wikitable.wizlords-example-table | @media (max-width: 599px) { | ||
.wikitable.wizlords-example-table | .wikitable.wizlords-example-table th, | ||
.wizlords-example-table | .wikitable.wizlords-example-table td, | ||
.wizlords-example-table- | .wizlords-example-table th, | ||
.wizlords-example-table td { | |||
font-size: 13px; | |||
line-height: 1.35; | |||
} | |||
} | } | ||
.wikitable.wizlords- | .wikitable.wizlords-reputation-table, | ||
.wizlords-reputation-table { | |||
width: 100%; | |||
max-width: none; | |||
} | } | ||
.wikitable.wizlords- | .wikitable.wizlords-reputation-table.mw-collapsed, | ||
.wizlords-reputation-table.mw-collapsed { | |||
.wizlords- | width: 520px; | ||
. | min-width: 520px; | ||
max-width: 100%; | |||
} | } | ||
.wikitable.wizlords- | .wikitable.wizlords-reputation-table caption, | ||
.wizlords- | .wizlords-reputation-table caption { | ||
white-space: nowrap; | |||
} | } | ||
.wikitable.wizlords- | .wikitable.wizlords-reputation-table th:nth-child(1), | ||
.wizlords- | .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- | .wikitable.wizlords-reputation-table th:nth-child(3), | ||
.wikitable.wizlords- | .wikitable.wizlords-reputation-table td:nth-child(3), | ||
.wizlords- | .wizlords-reputation-table th:nth-child(3), | ||
.wizlords- | .wizlords-reputation-table td:nth-child(3) { | ||
text-align: left; | |||
} | } | ||
.wikitable.wizlords- | .wikitable.wizlords-reputation-table th:nth-child(3), | ||
.wizlords-reputation-table th:nth-child(3) { | |||
.wizlords- | |||
text-align: center; | text-align: center; | ||
} | } | ||
@media (max-width: 899px) { | @media (max-width: 899px) { | ||
.wikitable.wizlords- | .wikitable.wizlords-reputation-table, | ||
.wizlords- | .wizlords-reputation-table { | ||
width: 100%; | |||
min-width: 0; | |||
max-width: 680px; | |||
margin-right: auto; | |||
margin-left: 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- | .wikitable.wizlords-reputation-table th:nth-child(2), | ||
.wizlords- | .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- | .wikitable.wizlords-reputation-table th:nth-child(3), | ||
.wizlords- | .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- | .wikitable.wizlords-reputation-table th:nth-child(3), | ||
.wizlords- | .wizlords-reputation-table th:nth-child(3) { | ||
text-align: center; | |||
} | |||
} | } | ||
.wikitable.wizlords- | @media (max-width: 380px) { | ||
.wikitable.wizlords- | .wikitable.wizlords-reputation-table th, | ||
.wizlords- | .wikitable.wizlords-reputation-table td, | ||
.wizlords- | .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- | .wikitable.wizlords-reputation-table td:nth-child(1), | ||
.wizlords- | .wizlords-reputation-table th:nth-child(1), | ||
.wizlords-reputation-table td:nth-child(1) { | |||
width: | 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- | .wikitable.wizlords-reputation-table th:nth-child(3), | ||
.wizlords- | .wikitable.wizlords-reputation-table td:nth-child(3), | ||
.wizlords-reputation-table th:nth-child(3), | |||
.wizlords-reputation-table td:nth-child(3) { | |||
width: 54%; | |||
} | } | ||
} | |||
.wikitable.wizlords- | @media (min-width: 600px) and (max-width: 899px) { | ||
.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: 18%; | |||
} | } | ||
.wikitable.wizlords- | .wikitable.wizlords-reputation-table th:nth-child(2), | ||
.wizlords- | .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- | .wikitable.wizlords-reputation-table th:nth-child(3), | ||
.wizlords- | .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- | .wizlords-spellbook > .mw-collapsible-toggle .mw-collapsible-text, | ||
.wizlords-spellbook > .mw-collapsible-toggle a { | |||
color: var(--wiz- | color: var(--wiz-link, #ff942d) !important; | ||
} | } | ||
.wizlords-spellbook { | .wizlords-spellbook-bottom-toggle { | ||
margin: | margin: 16px 0 0; | ||
padding: 0; | |||
text-align: right; | |||
color: var(--wiz-text, #d2d2d2) !important; | |||
cursor: pointer; | |||
} | } | ||
.wizlords-spellbook- | .wizlords-spellbook-bottom-toggle span, | ||
.wizlords-spellbook-bottom-toggle a { | |||
--wiz- | color: var(--wiz-link, #ff942d) !important; | ||
} | } | ||
.wizlords-spellbook- | .wizlords-spellbook .mw-collapsible-content { | ||
padding: 0 18px 20px; | |||
} | } | ||
.wizlords- | .wizlords-spell-category-heading { | ||
position: relative; | |||
margin: 0 0 3px; | |||
padding: 0; | |||
padding: | |||
color: var(--wiz-heading, #e7e1d4); | color: var(--wiz-heading, #e7e1d4); | ||
font-size: | font-size: 18px; | ||
font-weight: bold; | font-weight: bold; | ||
line-height: 1.3; | |||
} | } | ||
.wizlords- | .wizlords-spell-category-description { | ||
margin: 0 0 12px; | |||
color: var(--wiz-text, #d2d2d2); | |||
font-style: italic; | |||
font-weight: bold; | |||
} | } | ||
.wizlords- | .wizlords-spell-card-grid + .wizlords-spell-category-heading { | ||
margin-top: 0; | |||
padding-top: 26px; | |||
} | } | ||
.wizlords- | .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- | .wizlords-spell-card-grid { | ||
display: grid; | |||
grid-template-columns: repeat(6, minmax(0, 1fr)); | |||
gap: 14px; | |||
margin: 16px auto 26px; | |||
} | } | ||
.wizlords- | .wizlords-servant-rules { | ||
margin: 16px 0 18px; | |||
color: var(--wiz- | border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d); | ||
background: #171717; | |||
color: var(--wiz-text, #d2d2d2); | |||
} | } | ||
.wizlords- | .wizlords-servant-rules-title { | ||
padding: | padding: 12px 16px 4px; | ||
color: var(--wiz-spellbook-colour); | |||
font-size: 18px; | |||
font-weight: bold; | |||
line-height: 1.25; | |||
text-align: center; | |||
} | } | ||
.wizlords- | .wizlords-servant-rules-hint { | ||
display: none; | |||
padding: 0 16px 12px; | |||
padding: 0 | |||
color: var(--wiz-text, #d2d2d2); | color: var(--wiz-text, #d2d2d2); | ||
font-style: italic; | font-style: italic; | ||
text-align: center; | |||
} | } | ||
.wizlords- | .wizlords-servant-rules.mw-collapsed .wizlords-servant-rules-hint { | ||
display: block; | |||
} | } | ||
.wizlords- | .wizlords-servant-rules:not(.mw-collapsed) .wizlords-servant-rules-hint { | ||
display: none; | |||
} | } | ||
.wizlords- | .wizlords-servant-rules > .mw-collapsible-toggle { | ||
margin: 12px 16px 0 0; | |||
color: var(--wiz-text, #d2d2d2) !important; | |||
} | } | ||
.wizlords-servant-rules | .wizlords-servant-rules > .mw-collapsible-toggle .mw-collapsible-text, | ||
.wizlords-servant-rules > .mw-collapsible-toggle a { | |||
color: var(--wiz-link, #ff942d) !important; | |||
color: var(--wiz- | |||
} | } | ||
.wizlords-servant-rules- | .wizlords-servant-rules-grid { | ||
display: grid; | |||
grid-template-columns: repeat(4, minmax(0, 1fr)); | |||
gap: 18px; | |||
padding: 0 16px 16px; | |||
} | } | ||
.wizlords-servant-rules- | .wizlords-servant-rules-section { | ||
line-height: 1.45; | |||
} | } | ||
.wizlords-servant-rules-section ul { | |||
margin: 6px 0 0; | |||
.wizlords-servant-rules-section ul { | |||
margin: 6px 0 0; | |||
padding-left: 22px; | padding-left: 22px; | ||
list-style: disc outside; | list-style: disc outside; | ||
| Line 2,205: | Line 2,197: | ||
.ww-navbox-stack > .mw-collapsible-content > .ww-navbox:last-child { | .ww-navbox-stack > .mw-collapsible-content > .ww-navbox:last-child { | ||
border-bottom: 0; | 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; | |||
} | |||
} | } | ||
| Line 2,417: | Line 2,418: | ||
} | } | ||
/* | /* 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- | .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- | .skin-citizen .wizlords-culture-card:focus { | ||
--wiz- | outline: 2px solid var(--wiz-content-border, #ff942d); | ||
outline-offset: 2px; | |||
} | } | ||
.skin-citizen .wizlords- | .skin-citizen .wizlords-culture-card-header, | ||
.skin-citizen .wizlords-culture-card-body { | |||
display: contents; | |||
padding: 0; | |||
border: 0; | |||
background: transparent; | |||
} | } | ||
.skin-citizen .wizlords- | .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- | .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; | |||
margin: 0 | |||
} | } | ||
.skin-citizen .wizlords- | .skin-citizen .wizlords-culture-card-title { | ||
position: relative; | |||
border-bottom-color: var(--wiz- | 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- | .skin-citizen .wizlords-culture-card-title::before { | ||
content: ""; | content: ""; | ||
position: absolute; | |||
width: | top: 50%; | ||
height: | left: 1px; | ||
width: 7px; | |||
height: 7px; | |||
border-right: 2px solid var(--wiz-heading, #e7e1d4); | border-right: 2px solid var(--wiz-heading, #e7e1d4); | ||
border-bottom: 2px solid var(--wiz-heading, #e7e1d4); | border-bottom: 2px solid var(--wiz-heading, #e7e1d4); | ||
transform: translateY(- | transform: translateY(-65%) rotate(45deg); | ||
transform-origin: 50% 50%; | transform-origin: 50% 50%; | ||
} | } | ||
.skin-citizen .wizlords- | .skin-citizen .wizlords-culture-card.is-open .wizlords-culture-card-title::before { | ||
transform: translateY(-35%) rotate(225deg); | |||
transform: translateY( | |||
} | } | ||
.skin-citizen .wizlords- | .skin-citizen .wizlords-culture-card-title a { | ||
color: var(--wiz-heading, #e7e1d4); | color: var(--wiz-heading, #e7e1d4); | ||
text-decoration: none; | |||
text- | |||
} | } | ||
.skin-citizen .wizlords- | .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); | |||
height: | font-size: 13px; | ||
font-style: italic; | |||
line-height: 1.35; | |||
} | } | ||
.skin-citizen .wizlords- | .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- | .skin-citizen .wizlords-culture-card.is-open { | ||
align-items: start; | |||
padding-bottom: 12px; | |||
} | } | ||
.skin-citizen .wizlords- | .skin-citizen .wizlords-culture-card.is-open .wizlords-culture-separator { | ||
display: block; | |||
display: block; | grid-column: 1 / -1; | ||
width: 100%; | |||
height: 1px; | |||
margin: 12px 0 10px; | |||
background: var(--wiz-content-border, #ff942d); | |||
} | } | ||
.wizlords- | .skin-citizen .wizlords-culture-card.is-open .wizlords-culture-card-body > :not(p:first-of-type) { | ||
display: block; | |||
grid-column: 1 / -1; | |||
} | } | ||
.wizlords- | .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; | |||
} | } | ||
.wizlords- | .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; | |||
height: | |||
} | } | ||
.wizlords- | .skin-citizen .wizlords-culture-card.is-open .wizlords-culture-card-body ul { | ||
display: block; | display: block; | ||
grid-column: 1 / -1; | |||
margin: 6px 0 0; | |||
padding-left: 24px; | |||
} | } | ||
.wizlords- | .skin-citizen .wizlords-culture-card.is-open > .wizlords-available-classes-list { | ||
grid-column: 1 / -1; | |||
grid- | |||
} | } | ||
.wizlords- | .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; | |||
} | } | ||
.wizlords- | /* Race Available Classes lists: compact responsive columns. */ | ||
.skin-citizen .wizlords-available-classes-list { | |||
display: block !important; | |||
margin: 0; | width: 100%; | ||
margin: 6px 0 0; | |||
padding-left: 22px; | |||
column-count: 1; | |||
column-gap: 1.5em; | |||
list-style: disc outside; | |||
} | } | ||
.wizlords- | .skin-citizen .wizlords-culture-card .wizlords-available-classes-list { | ||
display: none; | display: none !important; | ||
grid-column: 1 / -1; | 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; | |||
} | } | ||
.wizlords- | .skin-citizen .wizlords-culture-card.is-open .wizlords-available-classes-list { | ||
display: block; | display: block !important; | ||
} | } | ||
. | .skin-citizen .wizlords-available-classes-list.is-multicolumn { | ||
column-count: 2; | |||
} | } | ||
.wizlords- | .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; | |||
} | } | ||
.wizlords- | .skin-citizen .wizlords-available-classes-list.is-drakeling-list { | ||
column-count: 2; | |||
} | |||
} | |||
.wizlords- | .skin-citizen .wizlords-available-classes-list li { | ||
display: list-item; | |||
margin: 0 0 4px; | |||
break-inside: avoid; | |||
margin: 0 | page-break-inside: avoid; | ||
} | } | ||
.wizlords- | .skin-citizen .wizlords-available-classes-list a { | ||
color: var(--wiz-link, #ff942d); | |||
text-decoration: none; | |||
} | } | ||
.wizlords- | .skin-citizen .wizlords-available-classes-list a:hover { | ||
color: #ffd37a; | |||
text-decoration: none; | |||
color: | |||
text- | |||
} | } | ||
.wizlords- | .skin-citizen .wizlords-shared-classes .wizlords-available-classes-list { | ||
width: auto; | |||
max-width: 100%; | |||
width: | margin-right: auto; | ||
margin-left: auto; | |||
} | } | ||
.wizlords- | /* 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; | |||
} | } | ||
.wizlords- | .skin-citizen .wizlords-class-category-accordion-arcane { | ||
--wiz-class-category-accent: #d66be3; | |||
} | } | ||
.wizlords- | .skin-citizen .wizlords-class-category-accordion-divine { | ||
--wiz-class-category-accent: #19c4eb; | |||
} | } | ||
.wizlords- | .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; | padding: 0; | ||
} | } | ||
.wizlords- | .skin-citizen .wizlords-class-category-accordion.is-open | ||
.wizlords-class-category-accordion-heading { | |||
border-bottom-color: var(--wiz-class-category-accent); | |||
} | } | ||
.wizlords- | .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- | .wizlords-class-category-accordion-heading::before { | ||
transform: translateY(2px) rotate(225deg); | |||
} | } | ||
.wizlords- | .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; | |||
} | } | ||
.wizlords- | .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; | |||
} | } | ||
.wizlords-class- | .skin-citizen .wizlords-class-category-accordion-icon img { | ||
display: block; | display: block; | ||
width: 30px !important; | |||
height: 30px !important; | |||
max-width: 30px !important; | |||
max-height: 30px !important; | |||
object-fit: contain; | |||
} | } | ||
.wizlords-class- | .skin-citizen .wizlords-class-category-accordion-body { | ||
display: none; | |||
display: | |||
} | } | ||
.wizlords-class- | .skin-citizen .wizlords-class-category-accordion.is-open | ||
.wizlords-class-category-accordion-body { | |||
display: block; | |||
} | } | ||
.wizlords- | .wizlords-mobile-spell-card.is-open { | ||
align-content: start; | align-content: start; | ||
padding-top: 24px; | padding-top: 24px; | ||
} | } | ||
.wizlords- | .wizlords-mobile-spell-card:focus { | ||
outline: 2px solid var(--wiz-content-border, #ff942d); | outline: 2px solid var(--wiz-content-border, #ff942d); | ||
outline-offset: 2px; | outline-offset: 2px; | ||
} | } | ||
.wizlords- | .wizlords-mobile-spell-card-icon { | ||
grid-row: 1 / span 2; | grid-row: 1 / span 2; | ||
grid-column: 1; | grid-column: 1; | ||
| Line 2,769: | Line 2,789: | ||
} | } | ||
.wizlords- | .wizlords-mobile-spell-card-icon img { | ||
display: block; | display: block; | ||
width: 88px !important; | width: 88px !important; | ||
| Line 2,779: | Line 2,798: | ||
} | } | ||
.wizlords- | .wizlords-mobile-spell-card-title { | ||
position: relative; | position: relative; | ||
grid-row: 1; | grid-row: 1; | ||
| Line 2,786: | Line 2,805: | ||
margin: 0 0 3px; | margin: 0 0 3px; | ||
padding: 0 22px 3px 18px; | padding: 0 22px 3px 18px; | ||
border-bottom: 1px solid var(--wiz- | border-bottom: 1px solid var(--wiz-mobile-spell-accent, var(--wiz-content-border, #ff942d)); | ||
color: var(--wiz-heading, #e7e1d4); | color: var(--wiz-heading, #e7e1d4); | ||
font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif; | font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif; | ||
| Line 2,795: | Line 2,814: | ||
} | } | ||
.wizlords- | .wizlords-mobile-spell-card-title::before { | ||
content: ""; | content: ""; | ||
position: absolute; | position: absolute; | ||
| Line 2,808: | Line 2,827: | ||
} | } | ||
.wizlords- | .wizlords-mobile-spell-card.is-open .wizlords-mobile-spell-card-title::before { | ||
transform: translateY(-35%) rotate(225deg); | transform: translateY(-35%) rotate(225deg); | ||
} | } | ||
.wizlords- | .wizlords-mobile-spell-card-summary { | ||
grid-row: 2; | grid-row: 2; | ||
grid-column: 2; | grid-column: 2; | ||
| Line 2,828: | Line 2,841: | ||
font-weight: 400; | font-weight: 400; | ||
line-height: 1.35; | line-height: 1.35; | ||
} | } | ||
.wizlords- | .wizlords-mobile-spell-card-rules { | ||
display: none; | display: none; | ||
grid-column: 1 / -1; | grid-column: 1 / -1; | ||
margin-top: 10px; | margin-top: 10px; | ||
padding: 10px 10px 2px; | padding: 10px 10px 2px; | ||
border-top: 1px solid var(--wiz- | border-top: 1px solid var(--wiz-mobile-spell-accent, var(--wiz-content-border, #ff942d)); | ||
color: var(--wiz-text, #d2d2d2); | color: var(--wiz-text, #d2d2d2); | ||
background: #171717; | background: #171717; | ||
line-height: 1.45; | |||
} | } | ||
.wizlords- | .wizlords-mobile-spell-card.is-open .wizlords-mobile-spell-card-rules { | ||
display: block; | display: block; | ||
} | } | ||
.wizlords- | .wizlords-mobile-spell-card-rules .wizlords-spell-card-meta, | ||
.wizlords-mobile-spell-card-rules .wizlords-spell-card-section { | |||
padding: 0 0 10px; | |||
} | } | ||
.wizlords- | .wizlords-mobile-spell-card-rules .wizlords-spell-card-divider { | ||
--wiz- | width: 55%; | ||
height: 1px; | |||
margin: 10px auto; | |||
background: var(--wiz-mobile-spell-accent, var(--wiz-content-border, #ff942d)); | |||
} | } | ||
.wizlords- | .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; | |||
} | |||
.skin-citizen .mw-parser-output .wizlords-collapsible-section > .wizlords-collapsed-hint { | .wizlords-mobile-servant-rules-title::before { | ||
font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif !important; | content: ""; | ||
font-size: 14px !important; | flex: 0 0 auto; | ||
font-style: normal !important; | width: 7px; | ||
font-weight: 400 !important; | 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; | line-height: 1.6 !important; | ||
} | |||
/* Reusable photo box: full image proportions, border, and optional caption. */ | |||
.wizlords-photo-box { | |||
float: right; | |||
width: min(250px, 100%); | |||
box-sizing: border-box; | |||
margin: 0 0 16px 24px; | |||
padding: 6px; | |||
border: 1px solid var(--wiz-content-border, #ff942d); | |||
background: #171717; | |||
} | |||
.wizlords-photo-box p { | |||
margin: 0; | |||
padding: 0; | |||
} | |||
.wizlords-photo-image { | |||
border: 1px solid var(--wiz-content-border, #ff942d); | |||
line-height: 0; | |||
} | |||
.wizlords-photo-image a, | |||
.wizlords-photo-image span { | |||
display: block; | |||
} | |||
.wizlords-photo-image img { | |||
display: block; | |||
width: 100%; | |||
height: auto; | |||
aspect-ratio: auto; | |||
object-fit: contain; | |||
} | |||
.wizlords-photo-caption { | |||
margin-top: 7px; | |||
padding: 0 4px; | |||
color: var(--wiz-text, #d2d2d2); | |||
font-size: 12px; | |||
line-height: 1.3; | |||
} | |||
.wizlords-image-clear { | |||
clear: both; | |||
} | |||
@media (max-width: 599px) { | |||
.wizlords-photo-box { | |||
float: none; | |||
margin: 0 auto 18px; | |||
} | |||
} | |||
/* Reusable expandable lore profiles for houses, duchies, and similar groups. */ | |||
.wizlords-lore-profile-mobile-icon { display: none; } | |||
.wizlords-lore-profile > .mw-collapsible-content { | |||
display: block; | |||
clear: both; | |||
} | |||
.wizlords-lore-profile-symbol { margin-top: 8px; } | |||
@media (max-width: 599px) { | |||
.wizlords-lore-profile { | |||
position: relative; | |||
padding: 14px; | |||
min-height: 116px; | |||
} | |||
.wizlords-lore-profile-mobile-icon { | |||
display: block; | |||
position: absolute; | |||
top: 14px; | |||
left: 14px; | |||
width: 88px; | |||
} | |||
.wizlords-lore-profile-mobile-icon p { margin: 0; } | |||
.wizlords-lore-profile-mobile-icon img { | |||
width: 88px; | |||
height: 88px; | |||
object-fit: contain; | |||
} | |||
.wizlords-lore-profile > .wizlords-collapsible-section-title, | |||
.wizlords-lore-profile > .wizlords-collapsed-hint { | |||
margin-left: 102px; | |||
} | |||
.wizlords-lore-profile > .wizlords-collapsible-section-title { | |||
font-family: Roboto, system-ui, sans-serif; | |||
font-size: 20px; | |||
font-weight: bold; | |||
line-height: 1.3; | |||
cursor: pointer; | |||
} | |||
.wizlords-lore-profile > .wizlords-collapsible-section-title::before { | |||
content: none; | |||
} | |||
.wizlords-lore-profile:not(.mw-collapsed) > .wizlords-collapsible-section-title::before { | |||
content: none; | |||
} | |||
.wizlords-lore-profile > .wizlords-collapsed-hint { | |||
display: block; | |||
font-style: italic; | |||
line-height: 1.4; | |||
} | |||
.wizlords-lore-profile > .mw-collapsible-toggle { display: none; } | |||
.wizlords-lore-profile > .mw-collapsible-content { | |||
clear: both; | |||
margin-top: 16px; | |||
} | |||
.wizlords-lore-profile-symbol { display: none; } | |||
} | |||
/* Lore profile headers: desktop text only; mobile icon, name and subtitle. */ | |||
.wizlords-lore-profile > .wizlords-lore-profile-mobile-icon { | |||
display: none !important; | |||
} | |||
@media (min-width: 600px) { | |||
.wizlords-lore-profile.mw-collapsed > .wizlords-collapsed-hint { | |||
display: block !important; | |||
} | |||
.wizlords-lore-profile:not(.mw-collapsed) > .wizlords-collapsed-hint { | |||
display: none !important; | |||
} | |||
} | |||
@media (max-width: 599px) { | |||
.wizlords-lore-profile > .wizlords-collapsed-hint { | |||
display: none !important; | |||
} | |||
} | |||
.wizlords-lore-profile .wizlords-lore-profile-symbol { | |||
width: min(300px, 100%); | |||
} | |||
@media (max-width: 599px) { | |||
.wizlords-lore-profile > .wizlords-lore-profile-mobile-icon { | |||
display: block !important; | |||
} | |||
.wizlords-lore-profile > .wizlords-collapsible-section-title { | |||
min-height: 88px; | |||
margin-bottom: 0; | |||
border-bottom: 0; | |||
} | |||
.wizlords-lore-profile > .wizlords-collapsible-section-title::before { | |||
content: none; | |||
} | |||
.wizlords-lore-profile:not(.mw-collapsed) > .wizlords-collapsible-section-title::before { | |||
content: none; | |||
} | |||
.wizlords-lore-profile-name { | |||
display: block; | |||
padding-bottom: 7px; | |||
border-bottom: 1px solid var(--wiz-content-border, #ff942d); | |||
} | |||
.wizlords-lore-profile-name::before { content: none; } | |||
.wizlords-lore-profile:not(.mw-collapsed) .wizlords-lore-profile-name::before { | |||
content: none; | |||
} | |||
.wizlords-lore-profile-subtitle { | |||
display: block; | |||
padding-top: 7px; | |||
font-size: 16px; | |||
line-height: 1.25; | |||
} | |||
.wizlords-lore-profile-dash { display: none; } | |||
.wizlords-lore-profile > .mw-collapsible-content { margin-top: 20px; } | |||
.wizlords-lore-profile .wizlords-lore-profile-symbol { display: none; } | |||
} | |||
.wizlords-lore-collapse { | |||
clear: both; | |||
} | |||
/* Lore cards reuse the class-card chevron and bottom section-collapse arrow. */ | |||
@media (max-width: 599px) { | |||
.wizlords-lore-profile > .mw-collapsible-toggle { | |||
display: none !important; | |||
} | |||
.wizlords-lore-profile .wizlords-lore-profile-name { | |||
position: relative; | |||
padding-left: 18px; | |||
} | |||
.wizlords-lore-profile .wizlords-lore-profile-name::before { | |||
content: ""; | |||
position: absolute; | |||
top: calc(50% - 4px); | |||
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-lore-profile:not(.mw-collapsed) .wizlords-lore-profile-name::before { | |||
content: ""; | |||
transform: translateY(-35%) rotate(225deg); | |||
} | |||
.wizlords-lore-profile .wizlords-lore-collapse { | |||
position: relative; | |||
min-height: 28px; | |||
font-size: 0; | |||
line-height: 1; | |||
color: transparent !important; | |||
cursor: pointer; | |||
} | |||
.wizlords-lore-profile .wizlords-lore-collapse span { | |||
font-size: 0; | |||
color: transparent !important; | |||
} | |||
.wizlords-lore-profile .wizlords-lore-collapse::after { | |||
content: ""; | |||
position: absolute; | |||
right: 4px; | |||
bottom: 6px; | |||
width: 10px; | |||
height: 10px; | |||
border-right: 2px solid var(--wiz-text, #d2d2d2); | |||
border-bottom: 2px solid var(--wiz-text, #d2d2d2); | |||
transform: rotate(225deg); | |||
} | |||
} | |||
/* Lore cards draw one chevron beside the name, not on Citizen's full header. */ | |||
@media (max-width: 599px) { | |||
.skin-citizen .wizlords-lore-profile > .wizlords-collapsible-section-title { | |||
padding-left: 0; | |||
padding-right: 0; | |||
} | |||
.skin-citizen .wizlords-lore-profile > .wizlords-collapsible-section-title::before { | |||
content: none !important; | |||
display: none !important; | |||
} | |||
} | |||
@media (max-width: 599px) { | |||
.wizlords-lore-profile-mobile-icon { cursor: pointer; } | |||
} | } | ||