Luxbane: 1 revisión importada

2026-09-11T23:10:03Z

1 revisión importada

← Revisión anterior	Revisión del 23:10 11 sep 2026
(Sin diferencias)

scw>Alistar Bot: A wikitext list in the card body renders as a compact bulleted list (via update-page on MediaWiki MCP Server)

2026-08-22T03:49:56Z

A wikitext list in the card body renders as a compact bulleted list (via update-page on MediaWiki MCP Server)

Página nueva

.t-card {
margin-block: var(--space-md);
/* Opaque, not transparent. In article flow this is a no-op — surface-0 is
* what shows through anyway — but a transparent card lets whatever sits
* behind it bleed through, which is visible the moment one overlaps
* something (a card riding up over a hero shows the artwork through its
* top edge). */
background-color: var(--color-surface-0);
border: var(--border-base);
border-radius: var(--border-radius-medium);
/* `overflow: clip` (both axes) so child header hover / open background
* colours stay inside the card's rounded corners. */
overflow: clip;
display: flex;
flex-direction: column;
}

.t-card__header {
display: flex;
align-items: center;
column-gap: var(--space-sm);
padding: var(--space-sm);
font-size: var(--font-size-small);
line-height: var(--line-height-small);
}

.t-card__header-content {
flex-grow: 1;
min-width: 0;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
column-gap: var(--space-sm);
}

.t-card__title {
font-weight: var(--font-weight-medium);
color: var(--color-emphasized);
}

.t-card__description {
color: var(--color-subtle);
font-size: var(--font-size-small);
line-height: var(--line-height-small);
}

/* Right-aligned trailing slot (chevron, one or more buttons, …). */
.t-card__trailing {
margin-left: auto;
display: flex;
align-items: center;
flex-wrap: wrap;
column-gap: var(--space-xs);
row-gap: var(--space-xs);
}

.t-card__content {
border-top: var(--border-subtle);
}

.t-card__content > .citizen-overflow-wrapper,
.t-card__content > .wikitable {
margin-block: 0;
box-shadow: none; /* Remove the border from the overflow wrapper */
}

.t-card__footer {
border-top: var(--border-subtle);
color: var(--color-subtle);
font-size: var(--font-size-x-small);
line-height: var(--line-height-x-small);
margin-inline: var(--space-sm);
padding-block: var(--space-xs) var(--space-sm);
}
/* ---- Media card (p.renderMediaCard) ----------------------------------------
* The art needs no negative margins: `.t-card` carries no padding of its own,
* so a section that declines to add any already reaches the card's inner edge,
* and the shell's `overflow: clip` trims it to the inside of the border radius.
*/
.t-card__media-layout {
display: flex;
min-width: 0;
/* Grow into the card. A card stretched by a grid row is taller than its own
* content, and without this the spare height lands below the layout as dead
* space rather than inside it, where the foot's auto margin can spend it —
* which shows up as two cards' read-more cues sitting at different heights
* in the same row. */
flex-grow: 1;
}

.t-card__media-layout--split {
flex-direction: row;
align-items: stretch;
}

.t-card__media-layout--banner {
flex-direction: column;
}

.t-card__media {
flex: none;
overflow: hidden;
background-color: var(--color-surface-2);
}

.t-card__media-layout--split > .t-card__media {
inline-size: 13rem;
align-self: stretch;
}

.t-card__media-layout--banner > .t-card__media {
aspect-ratio: 21 / 7;
}

/* MediaWiki wraps the file in two spans, a <picture>, and an anchor when linked
* — every one of them inline by default — so the whole chain has to be opened
* up before object-fit can reach the image. Listed explicitly because
* :is()/:where() are rejected by the TemplateStyles sanitizer. */
.t-card__media span,
.t-card__media a,
.t-card__media picture {
display: block;
block-size: 100%;
inline-size: 100%;
}

.t-card__media img {
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}

.t-card__media-body {
flex-grow: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--space-xs);
padding: var(--space-md);
}

.t-card__kicker {
font-family: var(--font-family-monospace);
font-size: var(--font-size-x-small);
line-height: var(--line-height-x-small);
font-weight: var(--font-weight-medium);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-subtle);
}

.t-card__media-body .t-card__title {
font-size: var(--font-size-medium);
line-height: var(--line-height-medium);
}

.t-card__body {
color: var(--color-subtle);
font-size: var(--font-size-small);
line-height: var(--line-height-small);
}

/* A wikitext list in the body, styled down to card scale. This deliberately
* targets whatever list the author wrote rather than adding a `highlights`
* parameter: `* item` is already how Update: pages write "what's new", so the
* card reads the same source shape the wiki already uses.
*
* The marker is absolutely positioned rather than a flex child, so an item that
* does wrap keeps its dot beside the FIRST line instead of centred against the
* whole item. */
.t-card__body ul {
margin: 0;
padding: 0;
list-style: none;
}

.t-card__body li {
position: relative;
margin: 0;
padding-inline-start: var(--space-md);
}

.t-card__body li + li {
margin-block-start: 2px;
}

.t-card__body li::before {
content: '';
position: absolute;
inset-inline-start: var(--space-xs);
/* Optically on the first line's centre, not the item's. */
top: 0.6em;
inline-size: 3px;
block-size: 3px;
border-radius: 50%;
background-color: currentcolor;
}

/* Pinned to the foot: cards in a row are stretched to the tallest, and this
* puts the spare height above the foot rather than below everything. The auto
* margin lives on the wrapper and not on each child, because flex splits free
* space evenly between auto margins — two of them would drive the pair apart
* instead of holding it at the bottom. */
.t-card__foot {
margin-top: auto;
padding-top: var(--space-xs);
display: flex;
flex-direction: column;
gap: var(--space-xs);
}

.t-card__readout {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--space-md);
font-family: var(--font-family-monospace);
}

.t-card__readout-label {
font-size: var(--font-size-x-small);
line-height: var(--line-height-x-small);
color: var(--color-subtle);
}

.t-card__readout-value {
font-size: var(--font-size-large);
line-height: var(--line-height-large);
font-weight: var(--font-weight-medium);
letter-spacing: -0.02em;
color: var(--color-emphasized);
}

@media (max-width: 639px) {
.t-card__media-layout--split {
flex-direction: column;
}

.t-card__media-layout--split > .t-card__media {
inline-size: auto;
aspect-ratio: 21 / 8;
}
}

/* ---- Whole-card link (renderMediaCard stretchLink) -------------------------
* The title's own anchor is stretched over the card by a pseudo-element rather
* than overlaying a second, empty anchor: an overlay with no text has no
* accessible name, and one repeating the title gives keyboard and screen-reader
* users a duplicate stop for the same destination. This way the card has
* exactly one link, named by its title, in its natural reading order.
*
* The cost is real and worth knowing: the pseudo-element sits over the body, so
* text inside the card can no longer be selected.
*/
.t-card--link {
position: relative;
/* Longhand on purpose: the sanitizer takes var() as a whole `transition`
* value but not as one component beside a literal property name, so the
* house idiom is the token for duration/easing plus a longhand for what
* moves (see Module:Tiles). */
transition: var(--transition-hover);
transition-property: border-color, background-color;
}

/* The title stops looking like a link once the whole card is one: the card is
* the affordance, so a blue underlined title inside it would advertise a second
* target that does not exist. The anchor keeps its focus ring, which is what a
* keyboard user needs. */
.t-card--link .t-card__title a,
.t-card--link .t-card__title a:hover {
color: inherit;
text-decoration: none;
}

.t-card--link .t-card__title a::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
}

.t-card--link:hover {
border-color: var(--border-color-interactive--hover);
background-color: var(--color-surface-2);
}

/* No card-level focus ring: `:focus-within` is rejected by the TemplateStyles
* sanitizer, as are :has()/:is()/:where(). The title's anchor is a real,
* visible element, so it keeps the skin's own focus ring around the title text
* — which is where a keyboard user is looking anyway. */

/* The affordance for the stretched anchor. Blue because that is what a link
* looks like on this wiki, and underlined on card hover so the cue answers the
* same gesture the border and background do. Deliberately NOT lifted above the
* overlay below — it is a span, so a click on it lands on the card's own link,
* which is the whole point. */
.t-card__more {
color: var(--color-progressive);
font-size: var(--font-size-small);
line-height: var(--line-height-small);
font-weight: var(--font-weight-medium);
}

.t-card--link:hover .t-card__more {
text-decoration: underline;
}

/* Anything else interactive has to be lifted above the stretched anchor, or the
* card swallows its clicks. */
.t-card--link .t-card__body a,
.t-card--link .t-card__readout a,
.t-card--link .t-card__footer a {
position: relative;
z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
.t-card--link {
transition: none;
}
}

Módulo:CardLua/styles.css - Historial de revisiones

Luxbane: 1 revisión importada

scw>Alistar Bot: A wikitext list in the card body renders as a compact bulleted list (via update-page on MediaWiki MCP Server)