Toggle search
Toggle menu
41
155
1
1.5K
Wizards and Warlords
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Common.css: Difference between revisions

MediaWiki interface page
More actions
← Older edit
Aurelian (talk | contribs)
Bureaucrats, Interface administrators, Administrators
1,509 edits
No edit summary
No edit summary
 
(78 intermediate revisions by the same user not shown)
Line 48: Line 48:


.mw-parser-output > ul,
.mw-parser-output > ul,
.mw-parser-output > ol,
.mw-parser-output > ol {
.mw-parser-output .toc-page > ul,
.mw-parser-output .toc-page > ol {
margin: 8px 0 12px 28px;
margin: 8px 0 12px 28px;
padding-left: 20px;
padding-left: 20px;
Line 56: Line 54:
}
}


.mw-parser-output > ul,
.mw-parser-output > ul {
.mw-parser-output .toc-page > ul {
list-style: disc outside;
list-style: disc outside;
}
}


.mw-parser-output ul ul,
.mw-parser-output ul ul {
.mw-parser-output .toc-page > 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 > ol,
.mw-parser-output > ol {
.mw-parser-output .toc-page > ol {
list-style: decimal outside;
list-style: decimal outside;
}
}


.mw-parser-output > ul > li,
.mw-parser-output > ul > li,
.mw-parser-output > ol > li,
.mw-parser-output > ol > li {
.mw-parser-output .toc-page > ul > li,
.mw-parser-output .toc-page > ol > li {
display: list-item;
display: list-item;
margin-bottom: 4px;
margin-bottom: 4px;
}
}


.mw-parser-output ul ul > li,
.mw-parser-output ul ul > li {
.mw-parser-output .toc-page > ul ul > li {
display: list-item;
display: list-item;
margin-bottom: 3px;
margin-bottom: 3px;
Line 189: Line 181:
}
}


/* Compatibility for an accidental nested-list wrapper on the Main Page:
/* Main Page banner.
*
  Desktop/small-desktop uses the full single-line parchment banner. Mobile and
* <ul>
  tablet use the transparent no-background version so the header sits cleanly
*  <ul class="wizlords-mainpage-whatislarp-list">...</ul>
  inside Citizen's narrow layout. */
* </ul>
.page-banner {
*
width: 100%;
* The outer list otherwise adds a second layer of indentation. The preferred
margin: 0 auto 24px;
* markup is still a single classified <ul>.
text-align: center;
*/
.mw-parser-output ul:has(> ul.wizlords-mainpage-whatislarp-list) {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
}


.mw-parser-output
.page-banner-desktop,
ul:has(> ul.wizlords-mainpage-whatislarp-list)
.page-banner-mobile {
> ul.wizlords-mainpage-whatislarp-list {
width: 100%;
margin-left: 0 !important;
}
}


/* Hide the content of the TOC when the checkbox is checked. */
.page-banner-desktop {
/* stylelint-disable-next-line selector-class-pattern */
display: block !important;
.toctogglecheckbox:checked ~ ul {
display: none;
}
}


.wiz-grid {
.page-banner-mobile {
outline: 5px solid red !important;
display: none !important;
}
}


.wiz-grid-item {
.page-banner figure {
display: block;
width: 100%;
width: 100%;
max-width: 100%;
margin: 0 auto;
}
}


.wiz-grid-item img {
.page-banner img {
display: block;
display: block;
width: 100%;
width: 100%;
max-width: 100%;
height: auto;
height: auto;
border: 0;
margin: 0 auto;
background: transparent;
box-shadow: none;
}
}


.wiz-grid-text {
.page-banner .mw-default-size,
margin-top: 8px;
.page-banner .mw-file-description,
.page-banner .mw-file-element {
display: block;
max-width: 100%;
margin-right: auto;
margin-left: auto;
}
}


/* TOC PAGE DIV */
@media (max-width: 899px) {
/* ------------ */
.page-banner {
/* Wrap __TOC__ in <div class="toc-page">...</div> to float it right. */
aspect-ratio: 300 / 141;
.toc-page #toc,
margin-bottom: 0;
.toc-page .toc {
background-image: url("/index.php/Special:Redirect/file/Wizlords_banner_nobg.png");
float: right;
background-repeat: no-repeat;
width: max-content;
background-position: center center;
min-width: 220px;
background-size: contain;
max-width: 320px;
}
margin: 0 0 16px 24px;
 
clear: right;
.page-banner-desktop {
font-size: 0.95em;
display: none !important;
box-sizing: border-box;
}
padding: 16px 24px;
 
border: 1px solid var(--wiz-content-border, #ff942d);
.page-banner-mobile {
background: var(--wiz-panel-solid-background, #0f0f0f);
display: none !important;
color: var(--wiz-text, #d2d2d2);
}
}
}


.toc-page #toc:has(.toctogglecheckbox:checked),
@media (min-width: 900px) {
.toc-page .toc:has(.toctogglecheckbox:checked) {
.page-banner {
width: fit-content;
aspect-ratio: auto;
min-width: 0;
background-image: none;
padding: 12px 16px;
}
}


.toc-page #toc .toctitle,
.page-banner-desktop {
.toc-page .toc .toctitle {
display: block !important;
margin: 0 0 10px;
}
color: var(--wiz-text, #d2d2d2);
text-align: center;
}


.toc-page #toc:has(.toctogglecheckbox:checked) .toctitle,
.page-banner-mobile {
.toc-page .toc:has(.toctogglecheckbox:checked) .toctitle {
display: none !important;
margin: 0;
}
line-height: 1.4;
}
}


.toc-page #toc .toctitle h2,
/* Compatibility for an accidental nested-list wrapper on the Main Page:
.toc-page .toc .toctitle h2 {
*
display: inline;
* <ul>
margin: 0;
*  <ul class="wizlords-mainpage-whatislarp-list">...</ul>
padding: 0;
* </ul>
border: 0;
*
color: var(--wiz-text, #d2d2d2);
* The outer list otherwise adds a second layer of indentation. The preferred
font-size: 14px;
* markup is still a single classified <ul>.
font-weight: bold;
*/
line-height: 1.4;
.mw-parser-output ul:has(> ul.wizlords-mainpage-whatislarp-list) {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
}


.toc-page #toc .toctoggle,
.mw-parser-output
.toc-page .toc .toctoggle {
ul:has(> ul.wizlords-mainpage-whatislarp-list)
color: var(--wiz-text, #d2d2d2);
> ul.wizlords-mainpage-whatislarp-list {
font-size: 12px;
margin-left: 0 !important;
}
}


.toc-page #toc .toctoggle a,
/* Hide the content of the TOC when the checkbox is checked. */
.toc-page .toc .toctoggle a {
/* stylelint-disable-next-line selector-class-pattern */
color: var(--wiz-link, #ff942d);
.toctogglecheckbox:checked ~ ul {
text-decoration: none;
display: none;
}
}


.toc-page #toc ul,
.wiz-grid {
.toc-page .toc ul {
outline: 5px solid red !important;
margin: 0;
padding: 0;
list-style: none;
}
}


.toc-page #toc li,
.wiz-grid-item {
.toc-page .toc li {
width: 100%;
display: block;
margin: 0;
padding: 0;
list-style: none;
line-height: 1.35;
}
}


.toc-page #toc > ul > li,
.wiz-grid-item img {
.toc-page .toc > ul > li {
display: block;
padding: 2px 0;
width: 100%;
height: auto;
border: 0;
background: transparent;
box-shadow: none;
}
}


.toc-page #toc li ul,
.wiz-grid-text {
.toc-page .toc li ul {
margin-top: 8px;
margin-left: 12px;
padding-left: 10px;
border-left: 1px dotted var(--wiz-content-border, #ff942d);
}
}


.toc-page #toc li li,
/* Intro text shown only while a MediaWiki collapsible section is closed. */
.toc-page .toc li li {
.wizlords-collapsed-hint {
margin-left: 0;
display: none;
padding: 2px 0;
margin: 0;
border-left: 0;
padding: 6px 0 6px;
color: var(--wiz-text, #d2d2d2);
font-style: italic;
}
}


.toc-page #toc .toclevel-3,
.wizlords-collapsed-hint-section.mw-collapsed > .wizlords-collapsed-hint {
.toc-page #toc .toclevel-4,
.toc-page #toc .toclevel-5,
.toc-page #toc .toclevel-6,
.toc-page .toc .toclevel-3,
.toc-page .toc .toclevel-4,
.toc-page .toc .toclevel-5,
.toc-page .toc .toclevel-6 {
display: none !important;
}
 
.toc-page #toc .tocnumber,
.toc-page .toc .tocnumber {
display: none;
}
 
.toc-page #toc a,
.toc-page .toc a {
color: var(--wiz-link, #ff942d);
text-decoration: none;
}
 
.toc-page #toc a:hover,
.toc-page .toc a:hover {
color: #ffd37a;
text-decoration: none;
}
 
/* Intro text shown only while a MediaWiki collapsible section is closed. */
.wizlords-collapsed-hint {
display: none;
margin: 0;
padding: 6px 0 6px;
color: var(--wiz-text, #d2d2d2);
font-style: italic;
}
 
.wizlords-collapsed-hint-section.mw-collapsed > .wizlords-collapsed-hint {
display: block;
display: block;
}
}
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:
}
}


.toc-page .hatnote {
.hatnote a,
margin: 14px 0 10px;
.wizlords-race-page .hatnote a {
padding-left: 18px;
color: var(--wiz-link, #ff942d);
color: var(--wiz-text, #d2d2d2);
text-decoration: none;
font-style: italic;
}
}


.toc-page .hatnote + h2,
.wizlords-culture-grid {
.toc-page .hatnote + .mw-heading2 {
display: grid;
margin-top: 12px !important;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 14px;
margin: 18px auto 24px;
}
}


.wizlords-race-page .hatnote a {
.wizlords-culture-card {
color: var(--wiz-link, #ff942d);
display: flex;
text-decoration: none;
flex-direction: column;
grid-column: span 2;
min-height: 100%;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
background: #171717;
}
}


.toc-page .hatnote a {
.wizlords-culture-grid.cultures-2 .wizlords-culture-card:nth-child(1),
color: var(--wiz-link, #ff942d);
.wizlords-culture-grid.cultures-4 .wizlords-culture-card:nth-child(1),
text-decoration: none;
.wizlords-culture-grid.cultures-4 .wizlords-culture-card:nth-child(3) {
grid-column: 2 / span 2;
}
}


.wizlords-race-intro {
.wizlords-culture-grid.cultures-2 .wizlords-culture-card:nth-child(2),
display: flex;
.wizlords-culture-grid.cultures-4 .wizlords-culture-card:nth-child(2),
align-items: center;
.wizlords-culture-grid.cultures-4 .wizlords-culture-card:nth-child(4) {
gap: 28px;
grid-column: 4 / span 2;
margin: 18px 0 24px;
}
}


.wizlords-race-intro-icon {
.wizlords-culture-grid.cultures-5 .wizlords-culture-card:nth-child(4) {
flex: 0 0 auto;
grid-column: 2 / span 2;
}
 
.wizlords-culture-grid.cultures-5 .wizlords-culture-card:nth-child(5) {
grid-column: 4 / span 2;
}
 
.wizlords-culture-grid.cultures-7 .wizlords-culture-card:nth-child(7) {
grid-column: 3 / span 2;
}
 
.wizlords-culture-card-header {
padding: 16px 12px 12px;
text-align: center;
border-bottom: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
}
}


.wizlords-race-intro-icon img {
.wizlords-culture-card-header img {
display: block;
display: block;
width: 100px;
width: 250px;
height: 100px;
height: 250px;
max-width: 100%;
margin: 0 auto 10px;
object-fit: contain;
object-fit: contain;
border: 0;
border: 0;
Line 713: Line 682:
}
}


.wizlords-race-quote {
.wizlords-culture-card-title,
position: relative;
.wizlords-culture-card-title a {
margin: 0;
color: var(--wiz-link, #ff942d);
padding: 0 34px;
color: var(--wiz-text, #d2d2d2);
font-size: 16px;
font-size: 16px;
font-style: italic;
font-weight: bold;
line-height: 1.6;
line-height: 1.25;
text-decoration: none;
}
}


.wizlords-race-quote::before,
.wizlords-culture-card-body {
.wizlords-race-quote::after {
flex: 1 1 auto;
position: absolute;
padding: 12px;
color: #555;
background: #1f1e1e;
font-size: 42px;
line-height: 1;
}
}


.wizlords-race-quote::before {
.wizlords-culture-card-body p {
content: "\201C";
margin: 0 0 12px;
left: 0;
font-style: italic;
top: -6px;
line-height: 1.55;
}
}


.wizlords-race-quote::after {
.wizlords-culture-separator {
content: "\201D";
width: 110px;
right: 0;
height: 1px;
bottom: -18px;
margin: 14px auto 12px;
background: var(--wiz-race-table-divider-colour, #9d7531);
}
}


.wizlords-race-quote-source {
.wizlords-shared-classes {
margin-top: 8px;
display: table;
text-align: right;
width: auto;
font-size: 12px;
min-width: 330px;
font-style: normal;
margin: 16px auto 22px;
padding: 10px 28px;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
background: #171717;
}
 
.wizlords-shared-classes-title {
margin-bottom: 5px;
color: var(--wiz-heading-colour, #f2ead7);
font-weight: bold;
font-weight: bold;
text-align: center;
}
}


.wizlords-culture-grid {
.wizlords-shared-classes ul {
display: grid;
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
grid-auto-flow: column;
gap: 14px;
grid-template-rows: repeat(5, auto);
margin: 18px auto 24px;
grid-auto-columns: max-content;
column-gap: 42px;
width: max-content;
margin: 2px auto 0;
padding-left: 0;
list-style: disc outside;
}
}


.wizlords-culture-card {
.wizlords-shared-classes li {
display: flex;
display: list-item;
flex-direction: column;
margin: 0 0 3px;
grid-column: span 2;
margin-left: 18px;
min-height: 100%;
break-inside: avoid;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
background: #171717;
}
}


.wizlords-culture-grid.cultures-2 .wizlords-culture-card:nth-child(1),
.wizlords-shared-classes.classes-8 ul {
.wizlords-culture-grid.cultures-4 .wizlords-culture-card:nth-child(1),
grid-template-rows: repeat(4, auto);
.wizlords-culture-grid.cultures-4 .wizlords-culture-card:nth-child(3) {
grid-column: 2 / span 2;
}
}


.wizlords-culture-grid.cultures-2 .wizlords-culture-card:nth-child(2),
.wizlords-shared-classes.classes-9 ul {
.wizlords-culture-grid.cultures-4 .wizlords-culture-card:nth-child(2),
grid-template-rows: repeat(5, auto);
.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) {
.wizlords-shared-classes.classes-4 ul {
grid-column: 2 / span 2;
grid-template-rows: repeat(4, auto);
}
}


.wizlords-culture-grid.cultures-5 .wizlords-culture-card:nth-child(5) {
.wizlords-shared-classes.classes-9-three ul {
grid-column: 4 / span 2;
grid-template-rows: repeat(3, auto);
}
}


.wizlords-culture-grid.cultures-7 .wizlords-culture-card:nth-child(7) {
.wizlords-class-compare {
grid-column: 3 / span 2;
display: flex;
justify-content: center;
align-items: stretch;
gap: 12px;
margin: 16px auto 22px;
}
}


.wizlords-culture-card-header {
.wizlords-class-compare .wizlords-shared-classes {
padding: 16px 12px 12px;
margin: 0;
text-align: center;
min-width: 0;
border-bottom: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
}
}


.wizlords-culture-card-header img {
.wizlords-shared-classes a {
display: block;
color: var(--wiz-link, #ff942d);
width: 250px;
text-decoration: none;
height: 250px;
max-width: 100%;
margin: 0 auto 10px;
object-fit: contain;
border: 0;
background: transparent;
}
}


.wizlords-culture-card-title,
.wizlords-shared-classes a:hover {
.wizlords-culture-card-title a {
color: #ffd37a;
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 {
.wizlords-culture-classes {
flex: 1 1 auto;
margin-top: 12px;
padding: 12px;
font-weight: bold;
background: #1f1e1e;
}
}


.wizlords-culture-card-body p {
.wizlords-culture-known-for,
margin: 0 0 12px;
.wizlords-culture-suggested-class {
font-style: italic;
margin-top: 10px;
line-height: 1.55;
line-height: 1.45;
}
}


.wizlords-culture-separator {
.wizlords-culture-suggested-class a {
width: 110px;
color: var(--wiz-link, #ff942d);
height: 1px;
text-decoration: none;
margin: 14px auto 12px;
background: var(--wiz-race-table-divider-colour, #9d7531);
}
}


.wizlords-shared-classes {
.wizlords-culture-class-note {
display: table;
margin-top: 6px;
width: auto;
line-height: 1.45;
min-width: 330px;
margin: 16px auto 22px;
padding: 10px 28px;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
background: #171717;
}
}


.wizlords-shared-classes-title {
.wizlords-culture-card-body ul {
margin-bottom: 5px;
margin: 4px 0 0;
color: var(--wiz-heading-colour, #f2ead7);
padding-left: 28px;
font-weight: bold;
text-align: center;
}
 
.wizlords-shared-classes ul {
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(5, auto);
grid-auto-columns: max-content;
column-gap: 42px;
width: max-content;
margin: 2px auto 0;
padding-left: 0;
list-style: disc outside;
list-style: disc outside;
}
}


.wizlords-shared-classes li {
.wizlords-culture-card-body li {
display: list-item;
display: list-item;
margin: 0 0 3px;
margin: 0 0 3px;
margin-left: 18px;
break-inside: avoid;
}
}


.wizlords-shared-classes.classes-8 ul {
.wizlords-culture-card-body a,
grid-template-rows: repeat(4, auto);
.wizlords-culture-row-classes a {
color: var(--wiz-link, #ff942d);
text-decoration: none;
}
 
.wizlords-culture-card-body a:hover,
.wizlords-culture-row-classes a:hover {
color: #ffd37a;
text-decoration: none;
}
}


.wizlords-shared-classes.classes-9 ul {
.wizlords-culture-list {
grid-template-rows: repeat(5, auto);
margin: 18px 0 24px;
}
}


.wizlords-shared-classes.classes-4 ul {
.wizlords-culture-row {
grid-template-rows: repeat(4, auto);
padding: 20px 0 24px;
border-bottom: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
}
}


.wizlords-shared-classes.classes-9-three ul {
.wizlords-culture-row-feature {
grid-template-rows: repeat(3, auto);
display: grid;
grid-template-columns: 150px 1px minmax(0, 1fr) 300px;
align-items: center;
gap: 22px;
margin: 10px 0 18px;
}
}


.wizlords-class-compare {
.wizlords-culture-row-icon img {
display: flex;
display: block;
justify-content: center;
width: 150px;
align-items: stretch;
height: 150px;
gap: 12px;
object-fit: contain;
margin: 16px auto 22px;
border: 0;
background: transparent;
}
}


.wizlords-class-compare .wizlords-shared-classes {
.wizlords-culture-row-divider {
margin: 0;
width: 1px;
min-width: 0;
height: 150px;
background: var(--wiz-race-table-border-colour, #4d4d4d);
}
}


.wizlords-shared-classes a {
.wizlords-culture-row-title,
color: var(--wiz-link, #ff942d);
.wizlords-culture-row-title a {
color: var(--wiz-heading, #e7e1d4);
font-size: 18px;
font-weight: bold;
line-height: 1.3;
text-decoration: none;
text-decoration: none;
}
}


.wizlords-shared-classes a:hover {
.wizlords-culture-row-description {
color: #ffd37a;
position: relative;
text-decoration: none;
margin: 0;
padding: 0 34px;
color: var(--wiz-text, #d2d2d2);
font-size: 16px;
font-style: italic;
line-height: 1.6;
}
}


.wizlords-culture-classes {
.wizlords-culture-row-description::before,
margin-top: 12px;
.wizlords-culture-row-description::after {
font-weight: bold;
position: absolute;
color: #555;
font-size: 42px;
line-height: 1;
}
}


.wizlords-culture-known-for,
.wizlords-culture-row-description::before {
.wizlords-culture-suggested-class {
content: "\201C";
margin-top: 10px;
left: 0;
line-height: 1.45;
top: -6px;
}
}


.wizlords-culture-suggested-class a {
.wizlords-culture-row-description::after {
color: var(--wiz-link, #ff942d);
content: "\201D";
text-decoration: none;
right: 0;
bottom: -18px;
}
}


.wizlords-culture-class-note {
.wizlords-culture-appearance {
margin-top: 6px;
box-sizing: border-box;
line-height: 1.45;
width: 300px;
padding: 4px;
border: 1px solid var(--wiz-race-table-divider-colour, #9d7531);
background: #171717;
}
}


.wizlords-culture-card-body ul {
.wizlords-culture-appearance img {
margin: 4px 0 0;
display: block;
padding-left: 28px;
width: 300px;
list-style: disc outside;
height: 138px;
object-fit: cover;
border: 0;
background: transparent;
}
}


.wizlords-culture-card-body li {
.wizlords-culture-appearance-caption {
display: list-item;
margin-top: 4px;
margin: 0 0 3px;
color: var(--wiz-text, #d2d2d2);
font-size: 12px;
line-height: 1.3;
}
}


.wizlords-culture-card-body a,
.wizlords-page-image {
.wizlords-culture-row-classes a {
box-sizing: border-box;
color: var(--wiz-link, #ff942d);
width: min(450px, 100%);
text-decoration: none;
padding: 6px;
border: 1px solid var(--wiz-content-border, #ff942d);
background: #171717;
}
}


.wizlords-culture-card-body a:hover,
.wizlords-page-image p {
.wizlords-culture-row-classes a:hover {
margin: 0;
color: #ffd37a;
padding: 0;
text-decoration: none;
}
}


.wizlords-culture-list {
.wizlords-page-image span,
margin: 18px 0 24px;
.wizlords-page-image a {
display: block;
}
}


.wizlords-culture-row {
.wizlords-page-image.right {
padding: 20px 0 24px;
float: right;
border-bottom: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
margin: 0 0 16px 24px;
}
}


.wizlords-culture-row-feature {
.wizlords-page-image.left {
display: grid;
float: left;
grid-template-columns: 150px 1px minmax(0, 1fr) 300px;
margin: 0 24px 16px 0;
align-items: center;
gap: 22px;
margin: 10px 0 18px;
}
}


.wizlords-culture-row-icon img {
.wizlords-page-image img {
display: block;
display: block;
width: 150px;
box-sizing: border-box;
height: 150px;
width: 100%;
object-fit: contain;
aspect-ratio: 2 / 1;
border: 0;
height: auto;
object-fit: cover;
border: 1px solid var(--wiz-content-border, #ff942d);
background: transparent;
background: transparent;
}
}


.wizlords-culture-row-divider {
.wizlords-page-image-caption {
width: 1px;
margin-top: 7px;
height: 150px;
padding: 0 4px;
background: var(--wiz-race-table-border-colour, #4d4d4d);
color: var(--wiz-text, #d2d2d2);
font-size: 12px;
line-height: 1.3;
}
}


.wizlords-culture-row-title,
.wizlords-culture-row-classes {
.wizlords-culture-row-title a {
color: var(--wiz-text, #d2d2d2);
color: var(--wiz-heading, #e7e1d4);
font-size: 14px;
font-size: 18px;
font-weight: bold;
line-height: 1.3;
text-decoration: none;
}
}


.wizlords-culture-row-description {
.wizlords-culture-class-list {
position: relative;
display: grid;
margin: 0;
grid-auto-flow: column;
padding: 0 34px;
grid-auto-columns: minmax(130px, max-content);
color: var(--wiz-text, #d2d2d2);
grid-template-rows: repeat(4, auto);
font-size: 16px;
gap: 4px 18px;
font-style: italic;
margin: 6px 0 0;
line-height: 1.6;
padding-left: 28px;
list-style: disc outside;
}
}


.wizlords-culture-row-description::before,
.wizlords-culture-class-list li {
.wizlords-culture-row-description::after {
display: list-item;
position: absolute;
margin: 0;
color: #555;
padding: 0;
font-size: 42px;
line-height: 1;
}
}


.wizlords-culture-row-description::before {
.wizlords-culture-class-list li::marker {
content: "\201C";
color: var(--wiz-text, #d2d2d2);
left: 0;
top: -6px;
}
}


.wizlords-culture-row-description::after {
/* Tablet and small-desktop layouts use a three-column grid. */
content: "\201D";
@media (min-width: 600px) and (max-width: 1199px) {
right: 0;
.wiz-grid {
bottom: -18px;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}
}


.wizlords-culture-appearance {
/* Phone layout uses two columns. */
box-sizing: border-box;
@media (max-width: 599px) {
width: 300px;
.wiz-grid {
padding: 4px;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
border: 1px solid var(--wiz-race-table-divider-colour, #9d7531);
}
background: #171717;
}
}


.wizlords-culture-appearance img {
/* CLASS OVERVIEW PAGE */
display: block;
/* ------------------- */
width: 300px;
.wizlords-classes-page {
height: 138px;
max-width: 100%;
object-fit: cover;
border: 0;
background: transparent;
}
}


.wizlords-culture-appearance-caption {
.wizlords-classes-page ul {
margin-top: 4px;
list-style: disc outside;
color: var(--wiz-text, #d2d2d2);
padding-left: 28px;
font-size: 12px;
line-height: 1.3;
}
}


.wizlords-page-image {
.wizlords-classes-page li {
box-sizing: border-box;
display: list-item;
width: min(450px, 100%);
padding: 6px;
border: 1px solid var(--wiz-content-border, #ff942d);
background: #171717;
}
}


.wizlords-page-image p {
.wizlords-class-category-table {
margin: 0;
width: 100%;
padding: 0;
min-width: 0;
max-width: 640px;
margin: 18px auto 24px;
border: 0 !important;
background: #171717;
color: var(--wiz-text, #d2d2d2);
border-collapse: collapse;
table-layout: fixed;
}
}


.wizlords-page-image span,
.wizlords-class-category-table th,
.wizlords-page-image a {
.wizlords-class-category-table td {
display: block;
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-page-image.right {
.wizlords-class-category-table th {
float: right;
padding: 8px 18px !important;
margin: 0 0 16px 24px;
background: #1f1e1e !important;
color: var(--wiz-heading, #e7e1d4) !important;
font-size: 18px;
text-align: center;
}
}


.wizlords-page-image.left {
.wizlords-class-category-icon {
float: left;
margin: 0 0 6px;
margin: 0 24px 16px 0;
text-align: center;
}
}


.wizlords-page-image img {
.wizlords-class-category-icon img {
display: block;
display: inline-block;
box-sizing: border-box;
width: 110px;
width: 100%;
height: 110px;
aspect-ratio: 2 / 1;
object-fit: contain;
height: auto;
object-fit: cover;
border: 1px solid var(--wiz-content-border, #ff942d);
background: transparent;
}
}


.wizlords-page-image-caption {
.wizlords-class-category-table td {
margin-top: 7px;
padding: 8px 18px 10px 12px !important;
padding: 0 4px;
background: #171717 !important;
color: var(--wiz-text, #d2d2d2);
font-size: 12px;
line-height: 1.3;
}
}


.wizlords-culture-row-classes {
.wizlords-class-category-table tr:first-child {
color: var(--wiz-text, #d2d2d2);
border-bottom: 0;
font-size: 14px;
}
}


.wizlords-culture-class-list {
.wizlords-class-category-table ul {
display: grid;
margin: 0;
grid-auto-flow: column;
padding-left: 22px;
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;
list-style: disc outside;
}
}


.wizlords-culture-class-list li {
.wizlords-class-category-table li {
display: list-item;
display: list-item;
margin: 0;
margin: 0 0 3px;
padding: 0;
}
}


.wizlords-culture-class-list li::marker {
.wizlords-class-category-name {
color: var(--wiz-text, #d2d2d2);
color: var(--wiz-link, #ff942d);
font-weight: bold;
}
}


/* Tablet and small-desktop layouts use a three-column grid. */
.wizlords-class-category-table a,
@media (min-width: 600px) and (max-width: 1199px) {
.wizlords-class-card a {
.wiz-grid {
color: var(--wiz-link, #ff942d);
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
text-decoration: none;
}
}
 
.wizlords-class-category-mobile {
display: none;
}
}


/* Phone layout uses two columns. */
/* Very narrow phones: use explicit paired category rows instead of trying to
@media (max-width: 599px) {
  re-map MediaWiki's desktop table, whose headers and lists are rendered in
.wiz-grid {
  separate table rows. This avoids horizontal scroll and keeps each category
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  as icon/name on the left and class list on the right. */
@media (max-width: 490px) {
.wizlords-class-category-table {
display: none !important;
}
}
}


/* CLASS OVERVIEW PAGE */
.wizlords-class-category-mobile {
/* ------------------- */
display: block;
.wizlords-classes-page {
width: 100%;
max-width: 100%;
max-width: 420px;
}
margin: 18px auto 24px;
border: 0 !important;
overflow: visible;
background: #171717;
color: var(--wiz-text, #d2d2d2);
}


.wizlords-classes-page ul {
.wizlords-class-category-mobile-row {
list-style: disc outside;
display: grid;
padding-left: 28px;
grid-template-columns: 44% 56%;
}
align-items: stretch;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
border-bottom: 0;
}


.wizlords-classes-page li {
.wizlords-class-category-mobile-row:last-child {
display: list-item;
border-bottom: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
}
}


.wizlords-class-category-table {
.wizlords-class-category-mobile-heading {
width: auto;
box-sizing: border-box;
min-width: 520px;
padding: 8px 8px !important;
max-width: 680px;
border-right: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
margin: 18px auto 24px;
background: #1f1e1e;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d) !important;
color: var(--wiz-heading, #e7e1d4);
background: #171717;
font-size: 16px;
color: var(--wiz-text, #d2d2d2);
font-weight: bold;
border-collapse: collapse;
text-align: center;
table-layout: auto;
}
}
 
.wizlords-class-category-mobile-list {
box-sizing: border-box;
display: flex;
align-items: center;
padding: 8px 10px !important;
background: #171717;
}
 
.wizlords-class-category-mobile .wizlords-class-category-icon {
margin-bottom: 4px;
}


.wizlords-class-category-table th,
.wizlords-class-category-mobile .wizlords-class-category-icon img {
.wizlords-class-category-table td {
width: 64px;
min-width: 150px;
height: auto;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d) !important;
max-width: 100%;
vertical-align: top;
}
}


.wizlords-class-category-table th {
.wizlords-class-category-mobile ul {
padding: 8px 18px !important;
margin: 0;
background: #1f1e1e !important;
padding-left: 18px;
color: var(--wiz-heading, #e7e1d4) !important;
list-style: disc outside;
font-size: 18px;
}
text-align: center;
}


.wizlords-class-category-icon {
.wizlords-class-category-mobile li {
margin: 0 0 6px;
display: list-item;
text-align: center;
margin: 0 0 3px;
}
}
}


.wizlords-class-category-icon img {
.wizlords-class-card-grid {
display: inline-block;
display: grid;
width: 110px;
grid-template-columns: repeat(6, minmax(0, 1fr));
height: 110px;
gap: 14px;
object-fit: contain;
margin: 16px auto 24px;
}
}


.wizlords-class-category-table td {
.wizlords-class-card {
padding: 8px 18px 10px 12px !important;
grid-column: span 2;
background: #171717 !important;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
background: #171717;
display: flex;
flex-direction: column;
scroll-margin-top: 90px;
}
}


.wizlords-class-category-table tr:first-child {
.wizlords-class-card-grid.cards-5 .wizlords-class-card:nth-child(4),
border-bottom: 0;
.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-category-table ul {
.wizlords-class-card-grid.cards-5 .wizlords-class-card:nth-child(5),
margin: 0;
.wizlords-class-card-grid.cards-4 .wizlords-class-card:nth-child(2),
padding-left: 22px;
.wizlords-class-card-grid.cards-4 .wizlords-class-card:nth-child(4) {
list-style: disc outside;
grid-column: 4 / span 2;
}
}


.wizlords-class-category-table li {
.wizlords-class-card-title {
display: list-item;
padding: 0 12px 10px;
margin: 0 0 3px;
}
 
.wizlords-class-category-name {
color: var(--wiz-link, #ff942d);
color: var(--wiz-link, #ff942d);
font-weight: bold;
font-weight: bold;
font-size: 18px;
line-height: 1.25;
text-align: center;
}
}


.wizlords-class-category-table a,
.wizlords-class-card-icon {
.wizlords-class-card a {
padding: 18px 12px 8px;
color: var(--wiz-link, #ff942d);
text-align: center;
text-decoration: none;
}
}


.wizlords-class-card-grid {
.wizlords-class-card-icon img {
display: grid;
display: inline-block;
grid-template-columns: repeat(6, minmax(0, 1fr));
width: 250px;
gap: 14px;
height: 250px;
margin: 16px auto 24px;
object-fit: contain;
}
}


.wizlords-class-card {
.wizlords-class-card-body {
grid-column: span 2;
padding: 12px;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
background: #1f1e1e;
background: #171717;
line-height: 1.5;
display: flex;
flex: 1 1 auto;
flex-direction: column;
scroll-margin-top: 90px;
}
}


.wizlords-class-card-grid.cards-5 .wizlords-class-card:nth-child(4),
.wizlords-class-card-summary {
.wizlords-class-card-grid.cards-4 .wizlords-class-card:nth-child(1),
font-style: italic;
.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-divider {
.wizlords-class-card-grid.cards-4 .wizlords-class-card:nth-child(2),
width: 55%;
.wizlords-class-card-grid.cards-4 .wizlords-class-card:nth-child(4) {
height: 1px;
grid-column: 4 / span 2;
margin: 14px auto 12px;
background: var(--wiz-race-table-divider-colour, #9d7531);
}
}


.wizlords-class-card-title {
.wizlords-class-card-rules {
padding: 0 12px 10px;
color: var(--wiz-text, #d2d2d2);
color: var(--wiz-link, #ff942d);
font-weight: bold;
font-size: 18px;
line-height: 1.25;
text-align: center;
}
}


.wizlords-class-card-icon {
.wizlords-class-card-rules div {
padding: 18px 12px 8px;
margin: 0 0 4px;
text-align: center;
}
}


.wizlords-class-card-icon img {
.wizlords-class-category-accordion {
display: inline-block;
--wiz-class-category-accent: var(--wiz-content-border, #ff942d);
width: 250px;
margin: 5px 0 14px;
height: 250px;
object-fit: contain;
}
}


.wizlords-class-card-body {
.wizlords-class-category-accordion-martial {
padding: 12px;
--wiz-class-category-accent: #9d7531;
background: #1f1e1e;
line-height: 1.5;
flex: 1 1 auto;
}
}


.wizlords-class-card-summary {
.wizlords-class-category-accordion-arcane {
font-style: italic;
--wiz-class-category-accent: #d66be3;
}
}


.wizlords-class-card-divider {
.wizlords-class-category-accordion-divine {
width: 55%;
--wiz-class-category-accent: #19c4eb;
height: 1px;
margin: 14px auto 12px;
background: var(--wiz-race-table-divider-colour, #9d7531);
}
}


.wizlords-class-card-rules {
.wizlords-class-category-accordion-heading {
color: var(--wiz-text, #d2d2d2);
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-card-rules div {
.wizlords-class-category-accordion .wizlords-class-card-grid {
margin: 0 0 4px;
margin-top: 4px;
margin-bottom: 12px;
}
}


/* MAGIC PAGE */
.wizlords-class-category-accordion-title {
/* ---------- */
color: var(--wiz-heading, #e7e1d4);
.wizlords-magic-used-by {
margin: 4px 0 14px;
padding-left: 18px;
color: var(--wiz-text, #d2d2d2);
font-style: italic;
}
}


.wizlords-magic-intro {
.wizlords-class-category-accordion-icon {
display: flex;
display: inline-flex;
align-items: center;
align-items: center;
gap: 22px;
justify-content: center;
margin: 12px 0 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);
font-style: italic;
}
 
.wizlords-magic-intro {
display: flex;
align-items: center;
gap: 22px;
margin: 12px 0 18px;
}
}


Line 1,337: Line 1,363:
margin: 22px auto 18px;
margin: 22px auto 18px;
background: var(--wiz-race-table-divider-colour, #9d7531);
background: var(--wiz-race-table-divider-colour, #9d7531);
}
/* SHARED STANDARD TABLE
  ---------------------
  Opt-in colour and border treatment for ordinary custom wiki tables.
  Add "wizlords-table" beside "wikitable" instead of overriding every
  MediaWiki-generated wikitable. Component-specific classes continue to own
  specialised widths, alignment, captions, and collapsible behaviour. */
.wikitable.wizlords-table,
.wizlords-table {
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d) !important;
border-collapse: collapse;
background: #171717 !important;
color: var(--wiz-text, #d2d2d2) !important;
}
.wikitable.wizlords-table th,
.wikitable.wizlords-table td,
.wizlords-table th,
.wizlords-table td {
padding: 8px 12px;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d) !important;
background: #171717 !important;
color: var(--wiz-text, #d2d2d2) !important;
}
.wikitable.wizlords-table th,
.wizlords-table th {
background: #1f1e1e !important;
color: var(--wiz-heading, #e7e1d4) !important;
}
}


Line 1,349: Line 1,405:
background: #171717;
background: #171717;
color: var(--wiz-text, #d2d2d2);
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,372: 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,388: Line 1,477:
}
}


.wikitable.wizlords-example-table caption,
@media (max-width: 899px) {
.wikitable.wizlords-reward-table,
.wizlords-reward-table {
margin-left: auto;
margin-right: auto;
}
}
 
.wikitable.wizlords-example-table caption,
.wizlords-example-table caption {
.wizlords-example-table caption {
color: var(--wiz-heading, #e7e1d4);
color: var(--wiz-heading, #e7e1d4);
Line 1,412: Line 1,509:
.wizlords-example-table td {
.wizlords-example-table td {
text-align: center;
text-align: center;
}
@media (max-width: 899px) {
.wikitable.wizlords-example-table,
.wizlords-example-table {
min-width: 0;
width: 100%;
box-sizing: border-box;
table-layout: fixed;
max-width: 600px;
margin: 14px auto 18px;
border: 0 !important;
border-radius: 0;
}
.wikitable.wizlords-example-table-full-heal,
.wizlords-example-table-full-heal {
max-width: 500px;
}
.wikitable.wizlords-example-table.mw-collapsed,
.wizlords-example-table.mw-collapsed {
background: transparent !important;
}
.wikitable.wizlords-example-table caption,
.wizlords-example-table caption {
display: table-caption !important;
caption-side: top;
width: auto;
max-width: none;
box-sizing: border-box;
padding: 0;
margin: 0 0 6px;
border: 0 !important;
background: transparent !important;
white-space: nowrap;
text-align: center !important;
cursor: pointer;
}
.wikitable.wizlords-example-table.mw-collapsed caption::before,
.wizlords-example-table.mw-collapsed caption::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
margin-right: 0.35em;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-25%) rotate(45deg);
transform-origin: 50% 50%;
}
.wikitable.wizlords-example-table:not(.mw-collapsed) caption::before,
.wizlords-example-table:not(.mw-collapsed) caption::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
margin-right: 0.35em;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(10%) rotate(225deg);
transform-origin: 50% 50%;
}
.wikitable.wizlords-example-table caption .mw-collapsible-toggle,
.wizlords-example-table caption .mw-collapsible-toggle {
display: none !important;
}
.wikitable.wizlords-example-table th,
.wikitable.wizlords-example-table td,
.wizlords-example-table th,
.wizlords-example-table td {
box-sizing: border-box;
padding: 8px 6px !important;
white-space: normal;
overflow-wrap: anywhere;
word-break: normal;
}
}
@media (max-width: 599px) {
.wikitable.wizlords-example-table th,
.wikitable.wizlords-example-table td,
.wizlords-example-table th,
.wizlords-example-table td {
font-size: 13px;
line-height: 1.35;
}
}
}


Line 1,451: Line 1,640:
}
}


.wizlords-indented-note {
.wikitable.wizlords-reputation-table th:nth-child(3),
margin: 8px 0 14px 28px;
.wizlords-reputation-table th:nth-child(3) {
color: var(--wiz-text, #d2d2d2);
text-align: center;
}
}


.wizlords-spellbook {
@media (max-width: 899px) {
margin: 18px 0 28px;
.wikitable.wizlords-reputation-table,
border: 1px solid var(--wiz-spellbook-colour, var(--wiz-link, #ff942d));
.wizlords-reputation-table {
background: #1f1e1e;
width: 100%;
min-width: 0;
max-width: 680px;
margin-right: auto;
margin-left: auto;
table-layout: fixed;
}
 
.wikitable.wizlords-reputation-table th,
.wikitable.wizlords-reputation-table td,
.wizlords-reputation-table th,
.wizlords-reputation-table td {
padding: 8px 6px !important;
white-space: normal !important;
overflow-wrap: normal !important;
word-break: normal !important;
hyphens: none;
}
 
.wikitable.wizlords-reputation-table th:nth-child(1),
.wikitable.wizlords-reputation-table td:nth-child(1),
.wizlords-reputation-table th:nth-child(1),
.wizlords-reputation-table td:nth-child(1) {
width: 22%;
text-align: center;
}
 
.wikitable.wizlords-reputation-table th:nth-child(2),
.wikitable.wizlords-reputation-table td:nth-child(2),
.wizlords-reputation-table th:nth-child(2),
.wizlords-reputation-table td:nth-child(2) {
width: 26%;
text-align: center;
}
 
.wikitable.wizlords-reputation-table th:nth-child(3),
.wikitable.wizlords-reputation-table td:nth-child(3),
.wizlords-reputation-table th:nth-child(3),
.wizlords-reputation-table td:nth-child(3) {
width: 52%;
text-align: left;
}
 
.wikitable.wizlords-reputation-table th:nth-child(3),
.wizlords-reputation-table th:nth-child(3) {
text-align: center;
}
}
}


.wizlords-spellbook-arcane {
@media (max-width: 380px) {
--wiz-spellbook-colour: #c141d3;
.wikitable.wizlords-reputation-table th,
--wiz-spell-card-divider-colour: #d66be3;
.wikitable.wizlords-reputation-table td,
}
.wizlords-reputation-table th,
.wizlords-reputation-table td {
padding: 7px 5px !important;
font-size: 12px;
line-height: 1.35;
}
 
.wikitable.wizlords-reputation-table th:nth-child(1),
.wikitable.wizlords-reputation-table td:nth-child(1),
.wizlords-reputation-table th:nth-child(1),
.wizlords-reputation-table td:nth-child(1) {
width: 21%;
}
 
.wikitable.wizlords-reputation-table th:nth-child(2),
.wikitable.wizlords-reputation-table td:nth-child(2),
.wizlords-reputation-table th:nth-child(2),
.wizlords-reputation-table td:nth-child(2) {
width: 25%;
}


.wizlords-spellbook-divine {
.wikitable.wizlords-reputation-table th:nth-child(3),
--wiz-spellbook-colour: #089cc0;
.wikitable.wizlords-reputation-table td:nth-child(3),
--wiz-spell-card-divider-colour: #19c4eb;
.wizlords-reputation-table th:nth-child(3),
.wizlords-reputation-table td:nth-child(3) {
width: 54%;
}
}
 
@media (min-width: 600px) and (max-width: 899px) {
.wikitable.wizlords-reputation-table th:nth-child(1),
.wikitable.wizlords-reputation-table td:nth-child(1),
.wizlords-reputation-table th:nth-child(1),
.wizlords-reputation-table td:nth-child(1) {
width: 18%;
}
 
.wikitable.wizlords-reputation-table th:nth-child(2),
.wikitable.wizlords-reputation-table td:nth-child(2),
.wizlords-reputation-table th:nth-child(2),
.wizlords-reputation-table td:nth-child(2) {
width: 22%;
}
 
.wikitable.wizlords-reputation-table th:nth-child(3),
.wikitable.wizlords-reputation-table td:nth-child(3),
.wizlords-reputation-table th:nth-child(3),
.wizlords-reputation-table td:nth-child(3) {
width: 60%;
}
}
 
.wizlords-indented-note {
margin: 8px 0 14px 28px;
color: var(--wiz-text, #d2d2d2);
}
 
.wizlords-spellbook {
margin: 18px 0 28px;
border: 1px solid var(--wiz-spellbook-colour, var(--wiz-link, #ff942d));
background: #1f1e1e;
}
 
.wizlords-spellbook-arcane {
--wiz-spellbook-colour: #c141d3;
--wiz-spell-card-divider-colour: #d66be3;
}
 
.wizlords-spellbook-divine {
--wiz-spellbook-colour: #089cc0;
--wiz-spell-card-divider-colour: #19c4eb;
}
}


Line 1,857: Line 2,158:
.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 1,862: Line 2,172:
   these grids from two columns to one. */
   these grids from two columns to one. */
@media (max-width: 899px) {
@media (max-width: 899px) {
.wizlords-spellbooks-desktop {
display: none;
}
.wizlords-spellbooks-mobile {
display: block;
}
.wizlords-class-card-grid,
.wizlords-class-card-grid,
.wizlords-spell-card-grid {
.wizlords-spell-card-grid {
Line 1,890: Line 2,208:
grid-column: auto;
grid-column: auto;
}
}
}


/* Phone card layout. */
.wizlords-mobile-spellbook {
@media (max-width: 599px) {
margin: 18px 0 30px;
.wizlords-class-card-grid,
}
.wizlords-spell-card-grid {
 
grid-template-columns: 1fr;
.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-servant-rules-grid {
.wizlords-mobile-spellbook.is-open .wizlords-mobile-spellbook-body {
grid-template-columns: 1fr;
display: block;
}
}
.wizlords-mobile-spellbook-collapse {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 28px;
margin: 14px auto 0;
padding-bottom: 3px;
border-bottom: 1px solid var(--wiz-mobile-spellbook-accent, var(--wiz-content-border, #ff942d));
color: var(--wiz-heading, #e7e1d4);
font-size: 18px;
font-weight: 700;
line-height: 1.3;
cursor: pointer;
}
.wizlords-mobile-spellbook-collapse::before {
content: "";
width: 11px;
height: 11px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(4px) rotate(225deg);
transform-origin: 50% 50%;
}
.wizlords-mobile-spellbook-collapse:focus {
outline: 2px solid var(--wiz-content-border, #ff942d);
outline-offset: 3px;
}
.wizlords-mobile-spell-category {
margin: 18px 0 22px;
}
.wizlords-mobile-spell-category-heading {
box-sizing: border-box;
width: 100%;
max-width: 560px;
margin: 0 auto 4px;
color: var(--wiz-heading, #e7e1d4);
font-size: 18px;
font-weight: 700;
line-height: 1.3;
text-align: left;
}
.wizlords-mobile-spell-category-description {
box-sizing: border-box;
width: 100%;
max-width: 560px;
margin: 0 auto 12px;
color: var(--wiz-text, #d2d2d2);
font-size: 14px;
font-style: italic;
line-height: 1.45;
}
.wizlords-mobile-spell-card {
--wiz-mobile-spell-accent: #9a3dae;
position: relative;
display: grid;
grid-template-columns: 92px minmax(0, 1fr);
grid-template-rows: auto auto auto;
align-content: center;
gap: 0 10px;
box-sizing: border-box;
width: 100%;
max-width: 560px;
min-height: 150px;
margin: 0 auto 10px;
padding: 8px 9px;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
background: #1f1e1e;
cursor: pointer;
}
.wizlords-mobile-spellbook-arcane .wizlords-mobile-spell-card {
--wiz-mobile-spell-accent: #d66be3;
}
.wizlords-mobile-spellbook-divine .wizlords-mobile-spell-card {
--wiz-mobile-spell-accent: #19c4eb;
}
.wizlords-mobile-spellbook-arcane {
--wiz-mobile-spellbook-accent: #d66be3;
}
.wizlords-mobile-spellbook-divine {
--wiz-mobile-spellbook-accent: #19c4eb;
}
/* Citizen mobile/tablet race culture cards.
  Desktop keeps the original grid; below 900px, culture/clan/subtype
  cards become compact expandable rows using the existing page markup. */
.skin-citizen .wizlords-culture-grid {
display: block;
margin: 16px auto 22px;
}
.skin-citizen .wizlords-culture-grid .wizlords-culture-card {
display: grid;
grid-template-columns: 92px minmax(0, 1fr);
grid-auto-rows: auto;
column-gap: 12px;
box-sizing: border-box;
width: 100%;
max-width: 560px;
min-height: 0;
margin: 0 auto 10px;
padding: 10px;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
background: #1f1e1e;
cursor: pointer;
overflow: hidden;
}
.skin-citizen .wizlords-culture-card:focus {
outline: 2px solid var(--wiz-content-border, #ff942d);
outline-offset: 2px;
}
.skin-citizen .wizlords-culture-card-header,
.skin-citizen .wizlords-culture-card-body {
display: contents;
padding: 0;
border: 0;
background: transparent;
}
.skin-citizen .wizlords-culture-card-header > :not(.wizlords-culture-card-title) {
grid-row: 1 / span 2;
grid-column: 1;
align-self: center;
justify-self: center;
}
.skin-citizen .wizlords-culture-card-header img {
display: block;
width: 88px !important;
height: 88px !important;
max-width: 88px !important;
max-height: 88px !important;
margin: 0 !important;
object-fit: contain;
}
.skin-citizen .wizlords-culture-card-title {
position: relative;
grid-row: 1;
grid-column: 2;
align-self: end;
min-width: 0;
margin: 0 0 4px;
padding: 0 0 4px 18px;
border-bottom: 1px solid var(--wiz-content-border, #ff942d);
color: var(--wiz-heading, #e7e1d4);
font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 1.25;
text-align: left;
}
.skin-citizen .wizlords-culture-card-title::before {
content: "";
position: absolute;
top: 50%;
left: 1px;
width: 7px;
height: 7px;
border-right: 2px solid var(--wiz-heading, #e7e1d4);
border-bottom: 2px solid var(--wiz-heading, #e7e1d4);
transform: translateY(-65%) rotate(45deg);
transform-origin: 50% 50%;
}
.skin-citizen .wizlords-culture-card.is-open .wizlords-culture-card-title::before {
transform: translateY(-35%) rotate(225deg);
}
.skin-citizen .wizlords-culture-card-title a {
color: var(--wiz-heading, #e7e1d4);
text-decoration: none;
}
.skin-citizen .wizlords-culture-card-body > p:first-of-type {
grid-row: 2;
grid-column: 2;
min-width: 0;
margin: 0;
color: var(--color-base, #d8d3c8);
font-size: 13px;
font-style: italic;
line-height: 1.35;
}
.skin-citizen .wizlords-culture-card-body > :not(p:first-of-type),
.skin-citizen .wizlords-culture-card-body > p:not(:first-of-type) {
display: none;
}
.skin-citizen .wizlords-culture-card.is-open {
align-items: start;
padding-bottom: 12px;
}
.skin-citizen .wizlords-culture-card.is-open .wizlords-culture-separator {
display: block;
grid-column: 1 / -1;
width: 100%;
height: 1px;
margin: 12px 0 10px;
background: var(--wiz-content-border, #ff942d);
}
.skin-citizen .wizlords-culture-card.is-open .wizlords-culture-card-body > :not(p:first-of-type) {
display: block;
grid-column: 1 / -1;
}
.skin-citizen .wizlords-culture-card.is-open .wizlords-culture-card-body > p:not(:first-of-type) {
display: block;
grid-column: 1 / -1;
margin: 8px 0 0;
font-style: normal;
line-height: 1.45;
}
.skin-citizen .wizlords-culture-card.is-open .wizlords-culture-classes,
.skin-citizen .wizlords-culture-card.is-open .wizlords-culture-known-for,
.skin-citizen .wizlords-culture-card.is-open .wizlords-culture-suggested-class,
.skin-citizen .wizlords-culture-card.is-open .wizlords-culture-class-note {
margin-top: 8px;
line-height: 1.45;
}
.skin-citizen .wizlords-culture-card.is-open .wizlords-culture-card-body ul {
display: block;
grid-column: 1 / -1;
margin: 6px 0 0;
padding-left: 24px;
}
.skin-citizen .wizlords-culture-card.is-open > .wizlords-available-classes-list {
grid-column: 1 / -1;
}
.skin-citizen .wizlords-culture-card.is-open .wizlords-culture-card-body li {
display: list-item;
margin-bottom: 3px;
}
.skin-citizen .wizlords-shared-classes {
max-width: 560px;
margin-right: auto;
margin-left: auto;
}
/* Race Available Classes lists: compact responsive columns. */
.skin-citizen .wizlords-available-classes-list {
display: block !important;
width: 100%;
margin: 6px 0 0;
padding-left: 22px;
column-count: 1;
column-gap: 1.5em;
list-style: disc outside;
}
.skin-citizen .wizlords-culture-card .wizlords-available-classes-list {
display: none !important;
grid-column: 1 / -1;
width: auto;
min-width: 0;
max-width: 100%;
margin-top: 8px;
margin-right: 0;
margin-left: 0;
column-count: 1;
column-gap: 0;
}
.skin-citizen .wizlords-culture-card.is-open .wizlords-available-classes-list {
display: block !important;
}
.skin-citizen .wizlords-available-classes-list.is-multicolumn {
column-count: 2;
}
.skin-citizen .wizlords-culture-card.is-open .wizlords-available-classes-list.is-multicolumn {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2px 18px;
column-count: auto;
}
.skin-citizen .wizlords-available-classes-list.is-drakeling-list {
column-count: 2;
}
.skin-citizen .wizlords-available-classes-list li {
display: list-item;
margin: 0 0 4px;
break-inside: avoid;
page-break-inside: avoid;
}
.skin-citizen .wizlords-available-classes-list a {
color: var(--wiz-link, #ff942d);
text-decoration: none;
}
.skin-citizen .wizlords-available-classes-list a:hover {
color: #ffd37a;
text-decoration: none;
}
.skin-citizen .wizlords-shared-classes .wizlords-available-classes-list {
width: auto;
max-width: 100%;
margin-right: auto;
margin-left: auto;
}
/* Mobile/tablet class category accordions.
  These are custom controls inside the real "Classes" article section, so
  Citizen/MobileFrontend no longer adds a second heading chevron. */
.skin-citizen .wizlords-class-category-accordion {
--wiz-class-category-accent: var(--wiz-content-border, #ff942d);
margin: 18px 0 30px;
}
.skin-citizen .wizlords-class-category-accordion-martial {
--wiz-class-category-accent: #9d7531;
}
.skin-citizen .wizlords-class-category-accordion-arcane {
--wiz-class-category-accent: #d66be3;
}
.skin-citizen .wizlords-class-category-accordion-divine {
--wiz-class-category-accent: #19c4eb;
}
.skin-citizen .wizlords-class-category-accordion-heading {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
flex-wrap: nowrap;
box-sizing: border-box;
width: 100%;
margin: 22px 0 10px;
padding: 0 0 6px;
border-bottom: 1px solid rgba(255, 255, 255, 0.18);
color: var(--wiz-heading, #e7e1d4);
cursor: pointer;
}
.skin-citizen .wizlords-class-category-accordion-heading > p {
display: contents;
margin: 0;
padding: 0;
}
.skin-citizen .wizlords-class-category-accordion.is-open
.wizlords-class-category-accordion-heading {
border-bottom-color: var(--wiz-class-category-accent);
}
.skin-citizen .wizlords-class-category-accordion-heading::before {
content: "";
flex: 0 0 auto;
width: 8px;
height: 8px;
border-right: 2px solid var(--wiz-heading, #e7e1d4);
border-bottom: 2px solid var(--wiz-heading, #e7e1d4);
transform: translateY(-2px) rotate(45deg);
transform-origin: 50% 50%;
}
.skin-citizen .wizlords-class-category-accordion.is-open
.wizlords-class-category-accordion-heading::before {
transform: translateY(2px) rotate(225deg);
}
.skin-citizen .wizlords-class-category-accordion-title {
flex: 0 1 auto;
min-width: 0;
color: var(--wiz-heading, #e7e1d4);
font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 1.25;
text-align: center;
white-space: nowrap;
}
.skin-citizen .wizlords-class-category-accordion-icon {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
min-width: 32px;
line-height: 1;
vertical-align: middle;
}
.skin-citizen .wizlords-class-category-accordion-icon span,
.skin-citizen .wizlords-class-category-accordion-icon a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
line-height: 1;
}
.skin-citizen .wizlords-class-category-accordion-icon img {
display: block;
width: 30px !important;
height: 30px !important;
max-width: 30px !important;
max-height: 30px !important;
object-fit: contain;
}
.skin-citizen .wizlords-class-category-accordion-body {
display: none;
}
.skin-citizen .wizlords-class-category-accordion.is-open
.wizlords-class-category-accordion-body {
display: block;
}
.wizlords-mobile-spell-card.is-open {
align-content: start;
padding-top: 24px;
}
.wizlords-mobile-spell-card:focus {
outline: 2px solid var(--wiz-content-border, #ff942d);
outline-offset: 2px;
}
.wizlords-mobile-spell-card-icon {
grid-row: 1 / span 2;
grid-column: 1;
align-self: center;
box-sizing: border-box;
width: 88px;
height: 88px;
overflow: hidden;
padding: 0;
text-align: center;
}
.wizlords-mobile-spell-card-icon img {
display: block;
width: 88px !important;
height: 88px !important;
max-width: 88px !important;
max-height: 88px !important;
object-fit: contain;
}
.wizlords-mobile-spell-card-title {
position: relative;
grid-row: 1;
grid-column: 2;
align-self: start;
margin: 0 0 3px;
padding: 0 22px 3px 18px;
border-bottom: 1px solid var(--wiz-mobile-spell-accent, var(--wiz-content-border, #ff942d));
color: var(--wiz-heading, #e7e1d4);
font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 1.25;
text-align: left;
}
.wizlords-mobile-spell-card-title::before {
content: "";
position: absolute;
top: 50%;
left: 1px;
width: 7px;
height: 7px;
border-right: 2px solid var(--wiz-heading, #e7e1d4);
border-bottom: 2px solid var(--wiz-heading, #e7e1d4);
transform: translateY(-65%) rotate(45deg);
transform-origin: 50% 50%;
}
.wizlords-mobile-spell-card.is-open .wizlords-mobile-spell-card-title::before {
transform: translateY(-35%) rotate(225deg);
}
.wizlords-mobile-spell-card-summary {
grid-row: 2;
grid-column: 2;
margin: 0;
color: var(--wiz-text, #d2d2d2);
font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif;
font-size: 13px;
font-style: italic;
font-weight: 400;
line-height: 1.35;
}
.wizlords-mobile-spell-card-rules {
display: none;
grid-column: 1 / -1;
margin-top: 10px;
padding: 10px 10px 2px;
border-top: 1px solid var(--wiz-mobile-spell-accent, var(--wiz-content-border, #ff942d));
color: var(--wiz-text, #d2d2d2);
background: #171717;
line-height: 1.45;
}
.wizlords-mobile-spell-card.is-open .wizlords-mobile-spell-card-rules {
display: block;
}
.wizlords-mobile-spell-card-rules .wizlords-spell-card-meta,
.wizlords-mobile-spell-card-rules .wizlords-spell-card-section {
padding: 0 0 10px;
}
.wizlords-mobile-spell-card-rules .wizlords-spell-card-divider {
width: 55%;
height: 1px;
margin: 10px auto;
background: var(--wiz-mobile-spell-accent, var(--wiz-content-border, #ff942d));
}
.wizlords-mobile-servant-rules-divider {
width: 100%;
max-width: 560px;
height: 1px;
margin: 18px auto 14px;
background: rgba(255, 255, 255, 0.18);
}
.wizlords-mobile-servant-rules-card {
box-sizing: border-box;
width: 100%;
max-width: 560px;
margin: 0 auto 10px;
padding: 12px 14px;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
background: #1f1e1e;
color: var(--wiz-text, #d2d2d2);
cursor: pointer;
}
.wizlords-mobile-servant-rules-card:focus {
outline: 2px solid var(--wiz-content-border, #ff942d);
outline-offset: 2px;
}
.wizlords-mobile-servant-rules-title {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 0 0 10px;
padding: 0 18px 6px;
border-bottom: 1px solid var(--wiz-mobile-spellbook-accent, #d66be3);
color: var(--wiz-heading, #e7e1d4);
font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 1.25;
text-align: center;
}
.wizlords-mobile-servant-rules-title::before {
content: "";
flex: 0 0 auto;
width: 7px;
height: 7px;
border-right: 2px solid var(--wiz-heading, #e7e1d4);
border-bottom: 2px solid var(--wiz-heading, #e7e1d4);
transform: translateY(-2px) rotate(45deg);
transform-origin: 50% 50%;
}
.wizlords-mobile-servant-rules-card.is-open .wizlords-mobile-servant-rules-title::before {
transform: translateY(2px) rotate(225deg);
}
.wizlords-mobile-servant-rules-card.is-open .wizlords-mobile-servant-rules-title {
margin-bottom: 10px;
}
.wizlords-mobile-servant-rules-content {
display: none;
}
.wizlords-mobile-servant-rules-card.is-open .wizlords-mobile-servant-rules-content {
display: block;
}
.wizlords-mobile-servant-rules-content .wizlords-servant-rules-grid {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
padding: 0;
}
.wizlords-mobile-servant-rules-content .wizlords-servant-rules-section {
line-height: 1.45;
}
.wizlords-mobile-servant-rules-content .wizlords-servant-rules-section ul {
margin: 6px 0 0;
padding-left: 22px;
}
}
@media (min-width: 900px) {
.wizlords-spellbooks-mobile {
display: none;
}
.wizlords-spellbooks-desktop {
display: block;
}
}
@media (min-width: 600px) and (max-width: 899px) {
.skin-citizen .wizlords-available-classes-list.is-multicolumn {
column-count: 3;
}
.skin-citizen .wizlords-culture-card.is-open .wizlords-available-classes-list.is-multicolumn {
grid-template-columns: repeat(3, minmax(0, 1fr));
column-count: auto;
}
.skin-citizen .wizlords-available-classes-list.is-drakeling-list {
column-count: 2;
}
}
/* Phone card layout. */
@media (max-width: 599px) {
.wizlords-class-card-grid,
.wizlords-spell-card-grid {
grid-template-columns: 1fr;
}
.wizlords-servant-rules-grid {
grid-template-columns: 1fr;
}
.wizlords-class-card-grid {
display: block;
margin: 12px 0 20px;
}
.wizlords-class-card {
position: relative;
display: grid;
grid-template-columns: 92px minmax(0, 1fr);
grid-template-rows: auto auto auto;
align-content: center;
gap: 0 10px;
box-sizing: border-box;
width: 100%;
margin: 0 0 10px;
padding: 8px 9px;
border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
background: #1f1e1e;
cursor: pointer;
}
.wizlords-class-card:not(.is-open) {
height: 150px;
overflow: hidden;
}
.wizlords-class-card.is-open {
height: auto;
align-content: start;
padding-top: 24px;
}
.wizlords-class-card:focus {
outline: 2px solid var(--wiz-content-border, #ff942d);
outline-offset: 2px;
}
.wizlords-class-card-icon {
grid-row: 1 / span 2;
grid-column: 1;
align-self: center;
box-sizing: border-box;
width: 88px;
height: 88px;
overflow: hidden;
padding: 0;
text-align: center;
}
.wizlords-class-card-icon span,
.wizlords-class-card-icon img {
display: block;
width: 88px !important;
height: 88px !important;
max-width: 88px !important;
max-height: 88px !important;
object-fit: contain;
}
.wizlords-class-card-title {
position: relative;
grid-row: 1;
grid-column: 2;
align-self: start;
margin: 0 0 3px;
padding: 0 22px 3px 18px;
border-bottom: 1px solid var(--wiz-class-accent, var(--wiz-content-border, #ff942d));
color: var(--wiz-heading, #e7e1d4);
font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 1.25;
text-align: left;
}
.wizlords-class-card-title::before {
content: "";
position: absolute;
top: 50%;
left: 1px;
width: 7px;
height: 7px;
border-right: 2px solid var(--wiz-heading, #e7e1d4);
border-bottom: 2px solid var(--wiz-heading, #e7e1d4);
transform: translateY(-65%) rotate(45deg);
transform-origin: 50% 50%;
}
.wizlords-class-card.is-open .wizlords-class-card-title::before {
transform: translateY(-35%) rotate(225deg);
}
.wizlords-class-card-body {
display: contents;
padding: 0;
background: transparent;
}
.wizlords-class-card-summary {
grid-row: 2;
grid-column: 2;
margin: 0;
color: var(--wiz-text, #d2d2d2);
font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif;
font-size: 13px;
font-style: italic;
font-weight: 400;
line-height: 1.35;
display: block;
overflow: visible;
}
.wizlords-class-card.is-open .wizlords-class-card-summary {
display: block;
overflow: visible;
}
.wizlords-class-card-divider {
display: none;
}
.wizlords-class-card-rules {
display: none;
grid-column: 1 / -1;
margin-top: 10px;
padding: 10px 10px 2px;
border-top: 1px solid var(--wiz-class-accent, var(--wiz-content-border, #ff942d));
color: var(--wiz-text, #d2d2d2);
background: #171717;
}
.wizlords-class-card.is-open .wizlords-class-card-rules {
display: block;
}
.wizlords-class-card-grid-martial .wizlords-class-card {
--wiz-class-accent: #9d7531;
}
.wizlords-class-card-grid-arcane .wizlords-class-card {
--wiz-class-accent: #9a3dae;
}
.wizlords-class-card-grid-divine .wizlords-class-card {
--wiz-class-accent: #33b6cf;
}
}
/* Citizen-specific safeguard: keep custom mobile collapsible box headings using
  the same clean interface typography as Citizen section headings. This is
  repeated here because Common.css can override equal-specificity skin rules
  depending on ResourceLoader order. */
.skin-citizen .mw-parser-output .wizlords-collapsible-section .wizlords-collapsible-section-title {
font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif !important;
font-size: 22px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
}
.skin-citizen .mw-parser-output .wizlords-collapsible-section > .wizlords-collapsed-hint {
font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif !important;
font-size: 14px !important;
font-style: normal !important;
font-weight: 400 !important;
line-height: 1.6 !important;
}
}
Retrieved from "https://wizlords.wiki/MediaWiki:Common.css"