Template:CS/products/card/styles.css: Difference between revisions
Content deleted Content added
No edit summary |
No edit summary |
||
| (One intermediate revision by the same user not shown) | |||
| Line 1: | Line 1: | ||
| ⚫ | |||
/* Alignment utility (mirrors the approach used by CS button) */ |
|||
.capsach-align |
.capsach-align-left{text-align:left;} |
||
.capsach-align- |
.capsach-align-center{text-align:center;} |
||
.capsach-align- |
.capsach-align-right{text-align:right;} |
||
.capsach-align-right { text-align: right; } |
|||
.cs-product-card{display:inline-block;width:300px;vertical-align:top;} |
|||
/* Card wrapper: fixed width, inline-block so alignment works via parent text-align */ |
|||
.cs-product-card { |
|||
display: inline-block; |
|||
width: 300px; /* Fixed card width per requirements */ |
|||
vertical-align: top; |
|||
} |
|||
| ⚫ | |||
/* Media (image) area */ |
|||
.cs-product-card__media .mw-file-element{display:block;width:100%;height:auto;box-sizing:border-box;border:1px solid #a2a9b1;background:#fff;} |
|||
| ⚫ | |||
line-height: 0; /* Remove stray gaps around inline images */ |
|||
} |
|||
.cs-product-card__placeholder{display:block;width:300px;box-sizing:border-box;border:1px solid #a2a9b1;background:#f8f9fa;padding-top:66.6667%;} |
|||
/* Ensure the actual <img> gets the border and scales to the card width. |
|||
MediaWiki adds class "mw-file-element" to file-rendered images. */ |
|||
.cs-product-card__media .mw-file-element { |
|||
| ⚫ | |||
width: 100%; |
|||
height: auto; |
|||
box-sizing: border-box; |
|||
border: 1px solid #a2a9b1; /* Wikimedia UI Base50; matches infobox/table border tone */ |
|||
background: #fff; |
|||
} |
|||
| ⚫ | |||
/* Placeholder if no image was provided (keeps layout consistent) */ |
|||
.cs-product-card__placeholder { |
|||
display: block; |
|||
width: 300px; |
|||
box-sizing: border-box; |
|||
border: 1px solid #a2a9b1; |
|||
background: #f8f9fa; /* Wikimedia light gray */ |
|||
/* Simple 3:2 area without aspect-ratio to remain TemplateStyles-friendly */ |
|||
padding-top: 66.6667%; |
|||
} |
|||
/* Accessible visible title (non-h* heading) */ |
|||
.cs-product-card__title { |
|||
margin-top: 8px; |
|||
font-weight: 600; |
|||
line-height: 1.35; |
|||
/* Inherit font-size so it matches page context; tweak if needed locally */ |
|||
color: inherit; |
|||
} |
|||
/* Spacing before CTA */ |
|||
| ⚫ | |||
margin-top: 10px; |
|||
} |
|||
Latest revision as of 21:09, 26 October 2025
.capsach-align{display:block;}
.capsach-align-left{text-align:left;}
.capsach-align-center{text-align:center;}
.capsach-align-right{text-align:right;}
.cs-product-card{display:inline-block;width:300px;vertical-align:top;}
.cs-product-card__media{line-height:0;}
.cs-product-card__media .mw-file-element{display:block;width:100%;height:auto;box-sizing:border-box;border:1px solid #a2a9b1;background:#fff;}
.cs-product-card__placeholder{display:block;width:300px;box-sizing:border-box;border:1px solid #a2a9b1;background:#f8f9fa;padding-top:66.6667%;}
.cs-product-card__cta{margin-top:10px;}