MediaWiki:Common.css: Difference between revisions
MediaWiki interface page
More actions
No edit summary |
No edit summary |
||
| (71 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 189: | Line 181: | ||
} | } | ||
/* | /* Main Page banner. | ||
Desktop/small-desktop uses the full single-line parchment banner. Mobile and | |||
tablet use the transparent no-background version so the header sits cleanly | |||
inside Citizen's narrow layout. */ | |||
.page-banner { | |||
width: 100%; | |||
margin: 0 auto 24px; | |||
text-align: center; | |||
. | |||
} | } | ||
. | .page-banner-desktop, | ||
.page-banner-mobile { | |||
width: 100%; | |||
} | } | ||
.page-banner-desktop { | |||
display: block !important; | |||
display: | |||
} | } | ||
. | .page-banner-mobile { | ||
display: none !important; | |||
} | } | ||
. | .page-banner figure { | ||
display: block; | |||
width: 100%; | width: 100%; | ||
max-width: 100%; | |||
margin: 0 auto; | |||
} | } | ||
. | .page-banner img { | ||
display: block; | display: block; | ||
width: 100%; | width: 100%; | ||
max-width: 100%; | |||
height: auto; | height: auto; | ||
margin: 0 auto; | |||
} | } | ||
. | .page-banner .mw-default-size, | ||
margin- | .page-banner .mw-file-description, | ||
.page-banner .mw-file-element { | |||
display: block; | |||
max-width: 100%; | |||
margin-right: auto; | |||
margin-left: auto; | |||
} | } | ||
@media (max-width: 899px) { | |||
.page-banner { | |||
aspect-ratio: 300 / 141; | |||
margin-bottom: 0; | |||
background-image: url("/index.php/Special:Redirect/file/Wizlords_banner_nobg.png"); | |||
background-repeat: no-repeat; | |||
background-position: center center; | |||
background-size: contain; | |||
} | |||
.page-banner-desktop { | |||
display: none !important; | |||
} | |||
} | |||
. | .page-banner-mobile { | ||
display: none !important; | |||
} | |||
} | } | ||
@media (min-width: 900px) { | |||
. | .page-banner { | ||
aspect-ratio: auto; | |||
background-image: none; | |||
} | |||
} | |||
. | .page-banner-desktop { | ||
display: block !important; | |||
} | |||
} | |||
. | .page-banner-mobile { | ||
display: none !important; | |||
} | |||
} | } | ||
. | /* Compatibility for an accidental nested-list wrapper on the Main Page: | ||
. | * | ||
* <ul> | |||
* <ul class="wizlords-mainpage-whatislarp-list">...</ul> | |||
* </ul> | |||
* | |||
* The outer list otherwise adds a second layer of indentation. The preferred | |||
* markup is still a single classified <ul>. | |||
*/ | |||
.mw-parser-output ul:has(> ul.wizlords-mainpage-whatislarp-list) { | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
list-style: none !important; | |||
} | } | ||
. | .mw-parser-output | ||
ul:has(> ul.wizlords-mainpage-whatislarp-list) | |||
> ul.wizlords-mainpage-whatislarp-list { | |||
margin-left: 0 !important; | |||
} | } | ||
. | /* Hide the content of the TOC when the checkbox is checked. */ | ||
. | /* stylelint-disable-next-line selector-class-pattern */ | ||
.toctogglecheckbox:checked ~ ul { | |||
display: none; | |||
} | } | ||
. | .wiz-grid { | ||
outline: 5px solid red !important; | |||
} | } | ||
. | .wiz-grid-item { | ||
width: 100%; | |||
} | } | ||
. | .wiz-grid-item img { | ||
display: block; | |||
width: 100%; | |||
height: auto; | |||
border- | 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. */ | ||
.wizlords-collapsed-hint { | |||
. | |||
display: none; | display: none; | ||
margin: 0; | |||
padding: 6px 0 6px; | |||
color: var(--wiz-text, #d2d2d2); | |||
font-style: italic; | |||
margin: 0; | |||
padding: 6px 0 6px; | |||
color: var(--wiz-text, #d2d2d2); | |||
font-style: italic; | |||
} | } | ||
| Line 664: | Line 611: | ||
} | } | ||
.hatnote, | |||
.wizlords-race-page .hatnote { | .wizlords-race-page .hatnote { | ||
margin: 4px 0 18px; | margin: 4px 0 18px; | ||
| Line 671: | Line 619: | ||
} | } | ||
.hatnote a, | |||
.wizlords-race-page .hatnote a { | .wizlords-race-page .hatnote a { | ||
color: var(--wiz-link, #ff942d); | color: var(--wiz-link, #ff942d); | ||
| Line 688: | Line 625: | ||
} | } | ||
. | .wizlords-culture-grid { | ||
display: grid; | |||
grid-template-columns: repeat(6, minmax(0, 1fr)); | |||
gap: 14px; | |||
margin: 18px auto 24px; | |||
} | } | ||
.wizlords- | .wizlords-culture-card { | ||
display: flex; | display: flex; | ||
flex-direction: column; | |||
grid-column: span 2; | |||
min-height: 100%; | |||
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d); | |||
background: #171717; | |||
} | |||
.wizlords-culture-grid.cultures-2 .wizlords-culture-card:nth-child(1), | |||
.wizlords-culture-grid.cultures-4 .wizlords-culture-card:nth-child(1), | |||
.wizlords-culture-grid.cultures-4 .wizlords-culture-card:nth-child(3) { | |||
grid-column: 2 / span 2; | |||
} | } | ||
.wizlords- | .wizlords-culture-grid.cultures-2 .wizlords-culture-card:nth-child(2), | ||
.wizlords-culture-grid.cultures-4 .wizlords-culture-card:nth-child(2), | |||
.wizlords-culture-grid.cultures-4 .wizlords-culture-card:nth-child(4) { | |||
grid-column: 4 / span 2; | |||
} | } | ||
.wizlords- | .wizlords-culture-grid.cultures-5 .wizlords-culture-card:nth-child(4) { | ||
grid-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) { | ||
.wizlords- | grid-column: 3 / span 2; | ||
} | } | ||
.wizlords- | .wizlords-culture-card-header { | ||
padding: 16px 12px 12px; | |||
text-align: center; | |||
border-bottom: 1px solid var(--wiz-race-table-border-colour, #4d4d4d); | |||
} | } | ||
.wizlords- | .wizlords-culture-card-header img { | ||
display: block; | |||
width: 250px; | |||
height: 250px; | |||
max-width: 100%; | |||
margin: 0 auto 10px; | |||
object-fit: contain; | |||
border: 0; | |||
background: transparent; | |||
} | } | ||
.wizlords- | .wizlords-culture-card-title, | ||
.wizlords-culture-card-title a { | |||
color: var(--wiz-link, #ff942d); | |||
font-size: | font-size: 16px; | ||
font-weight: bold; | font-weight: bold; | ||
line-height: 1.25; | |||
text-decoration: none; | |||
} | } | ||
.wizlords-culture- | .wizlords-culture-card-body { | ||
flex: 1 1 auto; | |||
padding: 12px; | |||
background: #1f1e1e; | |||
} | } | ||
.wizlords-culture-card { | .wizlords-culture-card-body p { | ||
margin: 0 0 12px; | |||
font-style: italic; | |||
line-height: 1.55; | |||
} | } | ||
.wizlords-culture- | .wizlords-culture-separator { | ||
width: 110px; | |||
height: 1px; | |||
margin: 14px auto 12px; | |||
background: var(--wiz-race-table-divider-colour, #9d7531); | |||
} | } | ||
.wizlords- | .wizlords-shared-classes { | ||
display: table; | |||
width: auto; | |||
min-width: 330px; | |||
margin: 16px auto 22px; | |||
padding: 10px 28px; | |||
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d); | |||
background: #171717; | |||
} | } | ||
.wizlords- | .wizlords-shared-classes-title { | ||
margin-bottom: 5px; | |||
color: var(--wiz-heading-colour, #f2ead7); | |||
font-weight: bold; | |||
text-align: center; | |||
} | } | ||
.wizlords- | .wizlords-shared-classes ul { | ||
grid-column: | 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); | |||
} | } | ||
.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-shared-classes { | .wizlords-class-compare .wizlords-shared-classes { | ||
margin: 0; | |||
min-width: 0; | |||
min-width: | } | ||
.wizlords-shared-classes a { | |||
color: var(--wiz-link, #ff942d); | |||
text-decoration: none; | |||
} | |||
.wizlords-shared-classes a:hover { | |||
color: #ffd37a; | |||
text-decoration: none; | |||
} | } | ||
.wizlords- | .wizlords-culture-classes { | ||
margin- | margin-top: 12px; | ||
font-weight: bold; | font-weight: bold; | ||
} | } | ||
.wizlords- | .wizlords-culture-known-for, | ||
.wizlords-culture-suggested-class { | |||
margin-top: 10px; | |||
line-height: 1.45; | |||
margin | |||
} | } | ||
.wizlords- | .wizlords-culture-suggested-class a { | ||
color: var(--wiz-link, #ff942d); | |||
text-decoration: none; | |||
} | } | ||
.wizlords- | .wizlords-culture-class-note { | ||
margin-top: 6px; | |||
line-height: 1.45; | |||
} | } | ||
.wizlords- | .wizlords-culture-card-body ul { | ||
margin: 4px 0 0; | |||
padding-left: 28px; | |||
list-style: disc outside; | |||
} | } | ||
.wizlords- | .wizlords-culture-card-body li { | ||
display: list-item; | |||
margin: 0 0 3px; | |||
} | } | ||
.wizlords- | .wizlords-culture-card-body a, | ||
.wizlords-culture-row-classes a { | |||
.wizlords- | |||
color: var(--wiz-link, #ff942d); | color: var(--wiz-link, #ff942d); | ||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
.wizlords- | .wizlords-culture-card-body a:hover, | ||
.wizlords-culture-row-classes a:hover { | |||
color: #ffd37a; | color: #ffd37a; | ||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
.wizlords-culture- | .wizlords-culture-list { | ||
margin | 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-culture- | .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; | |||
width: 150px; | |||
height: 150px; | |||
object-fit: contain; | |||
border: 0; | |||
background: transparent; | |||
} | } | ||
.wizlords-culture- | .wizlords-culture-row-divider { | ||
width: 1px; | |||
height: 150px; | |||
background: var(--wiz-race-table-border-colour, #4d4d4d); | |||
} | } | ||
.wizlords-culture- | .wizlords-culture-row-title, | ||
.wizlords-culture-row-title a { | |||
color: var(--wiz-heading, #e7e1d4); | |||
font-size: 18px; | |||
font-weight: bold; | |||
line-height: 1.3; | |||
.wizlords-culture-row- | |||
color: var(--wiz- | |||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
.wizlords-culture- | .wizlords-culture-row-description { | ||
position: relative; | |||
margin: 0; | |||
padding: 0 34px; | |||
color: var(--wiz-text, #d2d2d2); | |||
font-size: 16px; | |||
font-style: italic; | |||
line-height: 1.6; | |||
} | } | ||
.wizlords-culture- | .wizlords-culture-row-description::before, | ||
.wizlords-culture-row-description::after { | |||
position: absolute; | |||
color: #555; | |||
font-size: 42px; | |||
line-height: 1; | |||
} | } | ||
.wizlords-culture-row { | .wizlords-culture-row-description::before { | ||
content: "\201C"; | |||
left: 0; | |||
top: -6px; | |||
} | } | ||
.wizlords-culture-row- | .wizlords-culture-row-description::after { | ||
content: "\201D"; | |||
right: 0; | |||
bottom: -18px; | |||
} | } | ||
.wizlords-culture- | .wizlords-culture-appearance { | ||
display: block; | box-sizing: border-box; | ||
width: | width: 300px; | ||
height: | padding: 4px; | ||
object-fit: | border: 1px solid var(--wiz-race-table-divider-colour, #9d7531); | ||
background: #171717; | |||
} | |||
.wizlords-culture-appearance img { | |||
display: block; | |||
width: 300px; | |||
height: 138px; | |||
object-fit: cover; | |||
border: 0; | border: 0; | ||
background: transparent; | background: transparent; | ||
} | } | ||
.wizlords-culture- | .wizlords-culture-appearance-caption { | ||
margin-top: 4px; | |||
color: var(--wiz-text, #d2d2d2); | |||
font-size: 12px; | |||
color: var(--wiz- | |||
font-size: | |||
line-height: 1.3; | 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-page-image p { | |||
margin: 0; | margin: 0; | ||
padding: 0 | padding: 0; | ||
} | } | ||
.wizlords- | .wizlords-page-image span, | ||
.wizlords- | .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: block; | |||
box-sizing: border-box; | box-sizing: border-box; | ||
width: | width: 100%; | ||
aspect-ratio: 2 / 1; | |||
height: auto; | |||
height: | |||
object-fit: cover; | object-fit: cover; | ||
border: | border: 1px solid var(--wiz-content-border, #ff942d); | ||
background: transparent; | background: transparent; | ||
} | } | ||
.wizlords- | .wizlords-page-image-caption { | ||
margin-top: 4px; | margin-top: 7px; | ||
padding: 0 4px; | |||
color: var(--wiz-text, #d2d2d2); | color: var(--wiz-text, #d2d2d2); | ||
font-size: 12px; | font-size: 12px; | ||
| Line 1,050: | Line 971: | ||
} | } | ||
.wizlords- | .wizlords-culture-row-classes { | ||
color: var(--wiz-text, #d2d2d2); | |||
font-size: 14px; | |||
} | |||
.wizlords-culture-class-list { | |||
display: grid; | |||
grid-auto-flow: column; | |||
grid-auto-columns: minmax(130px, max-content); | |||
grid-template-rows: repeat(4, auto); | |||
gap: 4px 18px; | |||
margin: 6px 0 0; | |||
padding-left: 28px; | |||
list-style: disc outside; | |||
} | } | ||
.wizlords- | .wizlords-culture-class-list li { | ||
display: list-item; | |||
margin: 0; | margin: 0; | ||
padding: 0; | padding: 0; | ||
} | } | ||
.wizlords- | .wizlords-culture-class-list li::marker { | ||
color: var(--wiz-text, #d2d2d2); | |||
} | } | ||
. | /* Tablet and small-desktop layouts use a three-column grid. */ | ||
@media (min-width: 600px) and (max-width: 1199px) { | |||
.wiz-grid { | |||
grid-template-columns: repeat(3, minmax(0, 1fr)) !important; | |||
} | |||
} | } | ||
. | /* Phone layout uses two columns. */ | ||
@media (max-width: 599px) { | |||
.wiz-grid { | |||
grid-template-columns: repeat(2, minmax(0, 1fr)) !important; | |||
} | |||
} | } | ||
/* CLASS OVERVIEW PAGE */ | |||
/* ------------------- */ | |||
.wizlords-classes-page { | |||
max-width: 100%; | |||
} | } | ||
.wizlords-page | .wizlords-classes-page ul { | ||
list-style: disc outside; | |||
padding | padding-left: 28px; | ||
} | } | ||
.wizlords | .wizlords-classes-page li { | ||
display: list-item; | display: list-item; | ||
} | } | ||
.wizlords- | .wizlords-class-category-table { | ||
width: 100%; | |||
min-width: 0; | |||
max-width: 640px; | |||
margin: 18px auto 24px; | |||
border: 0 !important; | |||
background: #171717; | |||
color: var(--wiz-text, #d2d2d2); | color: var(--wiz-text, #d2d2d2); | ||
border-collapse: collapse; | |||
table-layout: fixed; | |||
} | } | ||
.wizlords-class-category-table th, | |||
.wizlords-class-category-table td { | |||
box-sizing: border-box; | |||
width: 33.333%; | |||
min-width: 0; | |||
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d) !important; | |||
vertical-align: top; | |||
} | } | ||
.wizlords-class-category-table th { | |||
padding: 8px 18px !important; | |||
background: #1f1e1e !important; | |||
color: var(--wiz-heading, #e7e1d4) !important; | |||
font-size: 18px; | |||
text-align: center; | |||
} | } | ||
.wizlords-class-category-icon { | |||
margin: 0 0 6px; | |||
.wizlords- | text-align: center; | ||
} | } | ||
.wizlords- | .wizlords-class-category-icon img { | ||
display: inline-block; | |||
width: 110px; | |||
height: 110px; | |||
object-fit: contain; | |||
} | |||
.wizlords-class-category-table td { | |||
padding: 8px 18px 10px 12px !important; | |||
background: #171717 !important; | |||
} | |||
.wizlords-class-category-table tr:first-child { | |||
border-bottom: 0; | |||
} | |||
.wizlords-class-category-table ul { | |||
margin: 0; | |||
padding-left: 22px; | |||
list-style: disc outside; | list-style: disc outside; | ||
} | } | ||
.wizlords- | .wizlords-class-category-table li { | ||
display: list-item; | display: list-item; | ||
margin: 0 0 3px; | |||
} | } | ||
.wizlords-class-category- | .wizlords-class-category-name { | ||
color: var(--wiz-link, #ff942d); | |||
font-weight: bold; | |||
color: var(--wiz- | |||
} | } | ||
.wizlords-class-category-table | .wizlords-class-category-table a, | ||
.wizlords-class- | .wizlords-class-card a { | ||
color: var(--wiz-link, #ff942d); | |||
text-decoration: none; | |||
} | } | ||
.wizlords-class-category- | .wizlords-class-category-mobile { | ||
display: none; | |||
} | } | ||
.wizlords-class-category- | /* 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- | .wizlords-class-category-mobile { | ||
display: block; | |||
width: 100%; | |||
max-width: 420px; | |||
margin: 18px auto 24px; | |||
} | border: 0 !important; | ||
overflow: visible; | |||
background: #171717; | |||
color: var(--wiz-text, #d2d2d2); | |||
} | |||
.wizlords-class-category- | .wizlords-class-category-mobile-row { | ||
display: grid; | |||
grid-template-columns: 44% 56%; | |||
} | align-items: stretch; | ||
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d); | |||
border-bottom: 0; | |||
} | |||
.wizlords-class-category- | .wizlords-class-category-mobile-row:last-child { | ||
border-bottom: 1px solid var(--wiz-race-table-border-colour, #4d4d4d); | |||
} | } | ||
.wizlords-class-category- | .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- | .wizlords-class-category-mobile-list { | ||
box-sizing: border-box; | |||
display: flex; | |||
align-items: center; | |||
padding: 8px 10px !important; | |||
background: #171717; | |||
} | |||
} | |||
.wizlords-class-category- | .wizlords-class-category-mobile .wizlords-class-category-icon { | ||
.wizlords-class- | margin-bottom: 4px; | ||
} | |||
} | |||
.wizlords-class-category-mobile { | .wizlords-class-category-mobile .wizlords-class-category-icon img { | ||
width: 64px; | |||
height: auto; | |||
max-width: 100%; | |||
} | } | ||
.wizlords-class-category-mobile { | .wizlords-class-category-mobile ul { | ||
margin: 0; | |||
padding-left: 18px; | |||
list-style: disc outside; | |||
} | } | ||
.wizlords-class-category-mobile | .wizlords-class-category-mobile li { | ||
display: | display: list-item; | ||
margin: 0 0 3px; | |||
} | } | ||
} | |||
.wizlords-class-card-grid { | |||
display: grid; | |||
} | grid-template-columns: repeat(6, minmax(0, 1fr)); | ||
gap: 14px; | |||
margin: 16px auto 24px; | |||
} | |||
.wizlords-class-card { | |||
grid-column: span 2; | |||
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d); | |||
background: #171717; | |||
display: flex; | |||
flex-direction: column; | |||
scroll-margin-top: 90px; | |||
} | |||
.wizlords-class-card-grid.cards-5 .wizlords-class-card:nth-child(4), | |||
.wizlords-class-card-grid.cards-4 .wizlords-class-card:nth-child(1), | |||
.wizlords-class-card-grid.cards-4 .wizlords-class-card:nth-child(3) { | |||
grid-column: 2 / span 2; | |||
} | |||
.wizlords-class-card-grid.cards-5 .wizlords-class-card:nth-child(5), | |||
.wizlords-class-card-grid.cards-4 .wizlords-class-card:nth-child(2), | |||
.wizlords-class-card-grid.cards-4 .wizlords-class-card:nth-child(4) { | |||
grid-column: 4 / span 2; | |||
} | |||
.wizlords-class-card-title { | |||
padding: 0 12px 10px; | |||
color: var(--wiz-link, #ff942d); | |||
font-weight: bold; | |||
font-size: 18px; | |||
line-height: 1.25; | |||
text-align: center; | |||
} | |||
.wizlords-class-card-icon { | |||
padding: 18px 12px 8px; | |||
text-align: center; | |||
} | |||
.wizlords-class-card-icon img { | |||
display: inline-block; | |||
width: 250px; | |||
height: 250px; | |||
object-fit: contain; | |||
} | } | ||
.wizlords-class-card- | .wizlords-class-card-body { | ||
padding: 12px; | |||
background: #1f1e1e; | |||
line-height: 1.5; | |||
flex: 1 1 auto; | |||
} | } | ||
.wizlords-class-card { | .wizlords-class-card-summary { | ||
font-style: italic; | |||
} | } | ||
.wizlords-class-card- | .wizlords-class-card-divider { | ||
width: 55%; | |||
height: 1px; | |||
margin: 14px auto 12px; | |||
background: var(--wiz-race-table-divider-colour, #9d7531); | |||
} | } | ||
.wizlords-class-card- | .wizlords-class-card-rules { | ||
color: var(--wiz-text, #d2d2d2); | |||
} | } | ||
.wizlords-class-card- | .wizlords-class-card-rules div { | ||
margin: 0 0 4px; | |||
} | } | ||
.wizlords-class- | .wizlords-class-category-accordion { | ||
--wiz-class-category-accent: var(--wiz-content-border, #ff942d); | |||
margin: 5px 0 14px; | |||
} | } | ||
.wizlords-class- | .wizlords-class-category-accordion-martial { | ||
--wiz-class-category-accent: #9d7531; | |||
} | } | ||
.wizlords-class- | .wizlords-class-category-accordion-arcane { | ||
--wiz-class-category-accent: #d66be3; | |||
} | } | ||
.wizlords-class- | .wizlords-class-category-accordion-divine { | ||
--wiz-class-category-accent: #19c4eb; | |||
} | } | ||
.wizlords-class- | .wizlords-class-category-accordion-heading { | ||
display: flex; | |||
align-items: center; | |||
margin: | 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-card- | .wizlords-class-category-accordion .wizlords-class-card-grid { | ||
margin-top: 4px; | |||
margin-bottom: 12px; | |||
} | } | ||
.wizlords-class- | .wizlords-class-category-accordion-title { | ||
color: var(--wiz-heading, #e7e1d4); | |||
} | } | ||
/* MAGIC PAGE */ | .wizlords-class-category-accordion-icon { | ||
/* ---------- */ | display: inline-flex; | ||
.wizlords-magic-used-by { | align-items: center; | ||
margin: 4px 0 14px; | justify-content: center; | ||
padding-left: 18px; | 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); | color: var(--wiz-text, #d2d2d2); | ||
font-style: italic; | font-style: italic; | ||
| Line 1,418: | Line 1,365: | ||
} | } | ||
.wikitable.wizlords | /* SHARED STANDARD TABLE | ||
.wizlords | --------------------- | ||
Opt-in colour and border treatment for ordinary custom wiki tables. | |||
Add "wizlords-table" beside "wikitable" instead of overriding every | |||
MediaWiki-generated wikitable. Component-specific classes continue to own | |||
specialised widths, alignment, captions, and collapsible behaviour. */ | |||
.wikitable.wizlords-table, | |||
.wizlords-table { | |||
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d) !important; | border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d) !important; | ||
border-collapse: collapse; | border-collapse: collapse; | ||
background: #171717; | background: #171717 !important; | ||
color: var(--wiz-text, #d2d2d2); | color: var(--wiz-text, #d2d2d2) !important; | ||
} | |||
.wikitable.wizlords-table th, | |||
.wikitable.wizlords-table td, | |||
.wizlords-table th, | |||
.wizlords-table td { | |||
padding: 8px 12px; | |||
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d) !important; | |||
background: #171717 !important; | |||
color: var(--wiz-text, #d2d2d2) !important; | |||
} | |||
.wikitable.wizlords-table th, | |||
.wizlords-table th { | |||
background: #1f1e1e !important; | |||
color: var(--wiz-heading, #e7e1d4) !important; | |||
} | |||
.wikitable.wizlords-magic-table, | |||
.wizlords-magic-table { | |||
width: auto; | |||
min-width: 520px; | |||
max-width: 680px; | |||
margin: 16px 0 18px; | |||
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d) !important; | |||
border-collapse: collapse; | |||
background: #171717; | |||
color: var(--wiz-text, #d2d2d2); | |||
} | |||
.wikitable.wizlords-example-table, | |||
.wizlords-example-table { | |||
width: 100%; | |||
max-width: 600px; | |||
margin-left: 0; | |||
margin-right: auto; | |||
} | |||
.wikitable.wizlords-example-table-full-heal, | |||
.wizlords-example-table-full-heal { | |||
max-width: 500px; | |||
} | |||
.wikitable.wizlords-example-table-full-heal th:first-child, | |||
.wikitable.wizlords-example-table-full-heal td:first-child, | |||
.wizlords-example-table-full-heal th:first-child, | |||
.wizlords-example-table-full-heal td:first-child { | |||
width: 34%; | |||
} | |||
.wikitable.wizlords-example-table-full-heal th:nth-child(2), | |||
.wikitable.wizlords-example-table-full-heal td:nth-child(2), | |||
.wizlords-example-table-full-heal th:nth-child(2), | |||
.wizlords-example-table-full-heal td:nth-child(2) { | |||
width: 66%; | |||
} | } | ||
| Line 1,451: | Line 1,455: | ||
max-width: none; | max-width: none; | ||
width: auto; | width: auto; | ||
margin-left: 0; | |||
margin-right: auto; | |||
border: 0 !important; | |||
border-radius: 0; | |||
box-shadow: none; | |||
outline: 0; | |||
} | } | ||
| Line 1,465: | Line 1,475: | ||
.wizlords-reward-table td:nth-child(2) { | .wizlords-reward-table td:nth-child(2) { | ||
text-align: center; | text-align: center; | ||
} | |||
@media (max-width: 899px) { | |||
.wikitable.wizlords-reward-table, | |||
.wizlords-reward-table { | |||
margin-left: auto; | |||
margin-right: auto; | |||
} | |||
} | } | ||
| Line 1,493: | Line 1,511: | ||
} | } | ||
.wikitable.wizlords- | @media (max-width: 899px) { | ||
.wizlords- | .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- | .wikitable.wizlords-example-table-full-heal, | ||
.wizlords- | .wizlords-example-table-full-heal { | ||
max-width: 500px; | |||
} | |||
} | |||
.wikitable.wizlords- | .wikitable.wizlords-example-table.mw-collapsed, | ||
.wizlords- | .wizlords-example-table.mw-collapsed { | ||
background: transparent !important; | |||
} | } | ||
.wikitable.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-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%; | |||
} | |||
.wizlords- | .wikitable.wizlords-example-table:not(.mw-collapsed) caption::before, | ||
.wizlords-example-table:not(.mw-collapsed) caption::before { | |||
content: ""; | |||
} | display: inline-block; | ||
width: 8px; | |||
height: 8px; | |||
margin-right: 0.35em; | |||
border-right: 2px solid currentColor; | |||
border-bottom: 2px solid currentColor; | |||
transform: translateY(10%) rotate(225deg); | |||
transform-origin: 50% 50%; | |||
} | |||
.wizlords- | .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%; | |||
} | } | ||
.wizlords- | .wikitable.wizlords-reputation-table caption, | ||
.wizlords-reputation-table caption { | |||
white-space: nowrap; | |||
} | } | ||
.wizlords- | .wikitable.wizlords-reputation-table th:nth-child(1), | ||
.wikitable.wizlords-reputation-table td:nth-child(1), | |||
.wikitable.wizlords-reputation-table th:nth-child(2), | |||
.wikitable.wizlords-reputation-table td:nth-child(2), | |||
.wizlords-reputation-table th:nth-child(1), | |||
.wizlords- | .wizlords-reputation-table td:nth-child(1), | ||
.wizlords- | .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- | .wizlords-reputation-table th:nth-child(3) { | ||
text-align: center; | |||
} | } | ||
.wizlords- | @media (max-width: 899px) { | ||
padding: | .wikitable.wizlords-reputation-table, | ||
} | .wizlords-reputation-table { | ||
width: 100%; | |||
min-width: 0; | |||
max-width: 680px; | |||
margin-right: auto; | |||
margin-left: auto; | |||
table-layout: fixed; | |||
} | |||
.wikitable.wizlords-reputation-table th, | |||
.wikitable.wizlords-reputation-table td, | |||
.wizlords-reputation-table th, | |||
.wizlords-reputation-table td { | |||
padding: 8px 6px !important; | |||
white-space: normal !important; | |||
overflow-wrap: normal !important; | |||
word-break: normal !important; | |||
hyphens: none; | |||
} | |||
.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: 22%; | |||
text-align: center; | |||
} | |||
} | .wikitable.wizlords-reputation-table th:nth-child(2), | ||
.wikitable.wizlords-reputation-table td:nth-child(2), | |||
.wizlords-reputation-table th:nth-child(2), | |||
.wizlords-reputation-table td:nth-child(2) { | |||
width: 26%; | |||
text-align: center; | |||
} | |||
.wikitable.wizlords-reputation-table th:nth-child(3), | |||
.wikitable.wizlords-reputation-table td:nth-child(3), | |||
.wizlords-reputation-table th:nth-child(3), | |||
.wizlords-reputation-table td:nth-child(3) { | |||
width: 52%; | |||
text-align: left; | |||
} | |||
.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%; | |||
width: | } | ||
.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: | margin: 8px 0 14px 28px; | ||
color: var(--wiz-text, #d2d2d2); | color: var(--wiz-text, #d2d2d2); | ||
} | } | ||
.wizlords- | .wizlords-spellbook { | ||
margin: 18px 0 28px; | |||
border: 1px solid var(--wiz-spellbook-colour, var(--wiz-link, #ff942d)); | |||
background: #1f1e1e; | |||
} | } | ||
.wizlords- | .wizlords-spellbook-arcane { | ||
--wiz-spellbook-colour: #c141d3; | |||
--wiz-spell-card-divider-colour: #d66be3; | |||
} | } | ||
.wizlords- | .wizlords-spellbook-divine { | ||
--wiz-spellbook-colour: #089cc0; | |||
--wiz-spell-card-divider-colour: #19c4eb; | |||
} | } | ||
.wizlords- | .wizlords-spellbook-title { | ||
display: | display: flex; | ||
align-items: center; | |||
justify-content: center; | |||
gap: 10px; | |||
padding: 14px 18px; | |||
color: var(--wiz- | color: var(--wiz-heading, #e7e1d4); | ||
font-size: 24px; | |||
font-weight: bold; | |||
text-align: center; | |||
} | } | ||
.wizlords- | .wizlords-spellbook-title-icon { | ||
display: inline-flex; | |||
align-items: center; | |||
justify-content: center; | |||
width: 40px; | |||
height: 40px; | |||
} | } | ||
.wizlords- | .wizlords-spellbook-title-icon img { | ||
display: | display: block; | ||
width: 40px; | |||
height: 40px; | |||
object-fit: contain; | |||
} | } | ||
.wizlords- | .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-link, #ff942d) !important; | |||
} | } | ||
.wizlords- | .wizlords-spellbook-bottom-toggle { | ||
margin: 16px 0 0; | |||
padding: 0; | |||
text-align: right; | |||
color: var(--wiz-text, #d2d2d2) !important; | |||
cursor: pointer; | |||
} | } | ||
.wizlords- | .wizlords-spellbook-bottom-toggle span, | ||
.wizlords-spellbook-bottom-toggle a { | |||
color: var(--wiz-link, #ff942d) !important; | |||
color: var(--wiz- | |||
} | } | ||
.wizlords- | .wizlords-spellbook .mw-collapsible-content { | ||
padding: 0 18px 20px; | |||
} | } | ||
.wizlords-spell- | .wizlords-spell-category-heading { | ||
position: relative; | |||
margin: 0 0 3px; | |||
padding: 0; | |||
color: var(--wiz-heading, #e7e1d4); | |||
font-size: 18px; | |||
font-weight: bold; | |||
line-height: 1.3; | |||
} | } | ||
.wizlords-spell- | .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-card-grid + .wizlords-spell-category-heading { | ||
margin-top: 0; | |||
padding-top: 26px; | |||
} | } | ||
.wizlords-spell-card-grid. | .wizlords-spell-card-grid + .wizlords-spell-category-heading::before { | ||
content: ""; | |||
} | position: absolute; | ||
top: 0; | |||
.wizlords- | left: 10%; | ||
width: 80%; | |||
height: 1px; | |||
background: var(--wiz-spellbook-colour); | |||
} | |||
.wizlords-spell-card-grid { | |||
display: grid; | |||
grid-template-columns: repeat(6, minmax(0, 1fr)); | |||
gap: 14px; | |||
margin: 16px auto 26px; | |||
} | |||
.wizlords-servant-rules { | |||
margin: 16px 0 18px; | |||
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d); | |||
background: #171717; | |||
color: var(--wiz-text, #d2d2d2); | |||
} | |||
.wizlords-servant-rules-title { | |||
padding: 12px 16px 4px; | |||
color: var(--wiz-spellbook-colour); | |||
font-size: 18px; | font-size: 18px; | ||
font-weight: bold; | font-weight: bold; | ||
| Line 1,748: | Line 1,882: | ||
} | } | ||
.wizlords- | .wizlords-servant-rules-hint { | ||
padding: 0 12px; | display: none; | ||
padding: 0 16px 12px; | |||
} | color: var(--wiz-text, #d2d2d2); | ||
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: | display: none; | ||
} | } | ||
.wizlords- | .wizlords-servant-rules > .mw-collapsible-toggle { | ||
margin: 12px 16px 0 0; | |||
color: var(--wiz-text, #d2d2d2) !important; | |||
margin: | |||
} | } | ||
.wizlords- | .wizlords-servant-rules > .mw-collapsible-toggle .mw-collapsible-text, | ||
.wizlords-servant-rules > .mw-collapsible-toggle a { | |||
color: var(--wiz-link, #ff942d) !important; | |||
} | } | ||
.wizlords- | .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; | margin: 6px 0 0; | ||
padding-left: 22px; | padding-left: 22px; | ||
| Line 1,782: | Line 1,925: | ||
} | } | ||
.wizlords- | .wizlords-servant-rules-section li { | ||
display: list-item; | display: list-item; | ||
margin: 0 0 3px; | margin: 0 0 3px; | ||
} | } | ||
.wizlords-spell-card | .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-link, #ff942d) | color: var(--wiz-spellbook-colour, var(--wiz-link, #ff942d)); | ||
text- | 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; | |||
margin: 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; | |||
padding: | line-height: 1.45; | ||
} | } | ||
.ww-navbox | /* WIZLORDS NAVBOX */ | ||
margin: | /* --------------- */ | ||
} | .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 | .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 | .ww-navbox > .mw-collapsible-toggle { | ||
color: var(--wiz- | position: relative; | ||
z-index: 2; | |||
float: right; | |||
margin: 4px 8px 0 0; | |||
color: var(--wiz-text, #d2d2d2) !important; | |||
font-weight: bold; | font-weight: bold; | ||
} | } | ||
.ww-navbox a | .ww-navbox > .mw-collapsible-toggle .mw-collapsible-text, | ||
color: # | .ww-navbox > .mw-collapsible-toggle a { | ||
color: var(--wiz-link, #ff942d) !important; | |||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
. | .ww-navbox > .mw-collapsible-content { | ||
display: flex; | |||
flex-direction: column; | |||
margin: | clear: both; | ||
margin: 0; | |||
padding: 0; | |||
} | } | ||
.ww-navbox- | .ww-navbox-row { | ||
border- | 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- | .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); | |||
border-bottom: | |||
} | } | ||
.ww-navbox- | .ww-navbox-row:nth-child(odd) { | ||
background: #222; | |||
} | } | ||
.ww-navbox- | .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; | |||
object-fit: contain; | } | ||
} | } | ||
.wizlords-class-card-title { | /* Phone and tablet card placement reset; the phone query below then reduces | ||
position: relative; | these grids from two columns to one. */ | ||
grid-row: 1; | @media (max-width: 899px) { | ||
grid-column: 2; | .wizlords-spellbooks-desktop { | ||
align-self: | display: none; | ||
margin: 0 0 | } | ||
padding: 0 22px | |||
border-bottom: 1px solid var(--wiz-class-accent, var(--wiz-content-border, #ff942d)); | .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); | color: var(--wiz-heading, #e7e1d4); | ||
font-family: | font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif; | ||
font-size: | font-size: 20px; | ||
font-weight: | font-weight: 700; | ||
line-height: 1. | line-height: 1.25; | ||
text-align: left; | text-align: left; | ||
} | } | ||
| Line 2,065: | Line 3,056: | ||
margin: 0; | margin: 0; | ||
color: var(--wiz-text, #d2d2d2); | color: var(--wiz-text, #d2d2d2); | ||
font-family: | font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif; | ||
font-size: | font-size: 13px; | ||
font-style: italic; | font-style: italic; | ||
font-weight: 400; | |||
line-height: 1.35; | line-height: 1.35; | ||
display: block; | |||
overflow: visible; | |||
} | |||
.wizlords-class-card.is-open .wizlords-class-card-summary { | |||
display: block; | |||
overflow: visible; | |||
} | } | ||
| Line 2,100: | Line 3,099: | ||
--wiz-class-accent: #33b6cf; | --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; | |||
} | } | ||