MediaWiki:Common.css: Difference between revisions
MediaWiki interface page
More actions
No edit summary |
No edit summary |
||
| Line 2,435: | Line 2,435: | ||
.wizlords-mobile-spellbook-divine { | .wizlords-mobile-spellbook-divine { | ||
--wiz-mobile-spellbook-accent: #19c4eb; | --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-culture-card-body li { | |||
display: list-item; | |||
margin-bottom: 3px; | |||
} | |||
.skin-citizen .wizlords-shared-classes { | |||
max-width: 560px; | |||
margin-right: auto; | |||
margin-left: auto; | |||
} | } | ||