MediaWiki:Citizen.css: Difference between revisions
MediaWiki interface page
More actions
Created page with "→* Wizards & Warlords Citizen skin overrides. * * Common.css owns article and template styling. This file only supplies the * Citizen colour palette, Citizen shell adjustments, and mobile layout fixes * for shared components that need a different narrow-screen presentation.: /* ========================================================================== Citizen Theme And Shared Site Colours ==================================================================..." |
No edit summary |
||
| Line 113: | Line 113: | ||
max-width: 100%; | max-width: 100%; | ||
height: auto; | height: auto; | ||
} | |||
/* ========================================================================== | |||
Citizen Homepage Square Icon Links | |||
-------------------------------------------------------------------------- | |||
The desktop dimensions live in Vector.css, which Citizen does not load. | |||
Define a compact four-column version here for the square homepage links. | |||
Wide image cards use separate classes and are intentionally unaffected. | |||
========================================================================== */ | |||
.skin-citizen .wizlords-mainpage-items { | |||
display: grid; | |||
grid-template-columns: repeat(4, minmax(0, 1fr)); | |||
gap: 12px 8px; | |||
justify-items: center; | |||
width: 100%; | |||
min-width: 0; | |||
text-align: center; | |||
} | |||
.skin-citizen .wizlords-imagetext { | |||
display: block; | |||
box-sizing: border-box; | |||
width: 100%; | |||
max-width: 78px; | |||
min-width: 0; | |||
min-height: 0; | |||
margin: 0; | |||
text-align: center; | |||
} | |||
.skin-citizen .wizlords-imagetext-image { | |||
width: 64px; | |||
height: 64px; | |||
margin: 0 auto; | |||
} | |||
.skin-citizen .wizlords-imagetext-image img { | |||
display: block; | |||
width: 64px; | |||
height: 64px; | |||
max-width: 100%; | |||
object-fit: contain; | |||
border: 0; | |||
background: transparent; | |||
} | |||
.skin-citizen .wizlords-imagetext-text { | |||
display: flex; | |||
align-items: flex-start; | |||
justify-content: center; | |||
box-sizing: border-box; | |||
width: 100%; | |||
min-width: 0; | |||
min-height: 34px; | |||
height: auto; | |||
margin-top: 4px; | |||
color: var(--wiz-link); | |||
font-size: 12px; | |||
line-height: 1.2; | |||
text-align: center; | |||
overflow-wrap: anywhere; | |||
} | |||
.skin-citizen .wizlords-imagetext-text a { | |||
color: var(--wiz-link); | |||
text-decoration: none; | |||
} | |||
.skin-citizen .wizlords-imagetext-text a:hover { | |||
color: #ffd37a; | |||
} | |||
/* Tablets and wider Citizen viewports can use slightly larger icons while | |||
retaining the same predictable four-column arrangement. */ | |||
@media screen and (min-width: 600px) { | |||
.skin-citizen .wizlords-mainpage-items { | |||
gap: 16px 12px; | |||
} | |||
.skin-citizen .wizlords-imagetext { | |||
max-width: 96px; | |||
} | |||
.skin-citizen .wizlords-imagetext-image, | |||
.skin-citizen .wizlords-imagetext-image img { | |||
width: 82px; | |||
height: 82px; | |||
} | |||
.skin-citizen .wizlords-imagetext-text { | |||
font-size: 13px; | |||
} | |||
} | } | ||
| Line 152: | Line 244: | ||
} | } | ||
.skin-citizen .wizlords-wideimagetext { | .skin-citizen .wizlords-wideimagetext { | ||
max-width: 100%; | max-width: 100%; | ||