Insurer Brain

Template:CS/products/card/styles.css: Difference between revisions

Browse history interactively
← Older editNewer edit →
Content deleted Content added
No edit summary
No edit summary
Line 1:
/* Alignment utility (mirrors the approach used by CS button) */
/* 2) Template:CS/products/card/styles.css */
.capsach-cardalign {width display:300px block;margin:0 }
.capsach-align-left {margin-left:0;margin-right:auto; text-align: left; }
.capsach-align-center {margin-left:auto;margin-right:auto; text-align:left center; }
.capsach-align-right {margin text-leftalign:auto;margin- right:0;text-align:left }
 
/* MediaCard wrapper: fixed 2:3width, frameinline-block (300x425),so alignment imageworks fillsvia andparent cropstext-align */
.cs-product-card {
.capsach-card__media{position:relative;width:100%;height:425px;overflow:hidden;border-radius:0px;background-color:#ffffff}
.capsach-card__media a{ display: inline-block;width:100%;height:100%}
width: 300px; /* Fixed card width per requirements */
.capsach-card__img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;box-sizing:border-box;border:1px solid #a2a9b1;}
vertical-align: top;
}
 
/* Media (image) area */
/* Placeholder when no img is provided */▼
.cs-product-card__media {
.capsach-card__placeholder{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(180deg,#f2f3f5,#e6e7e9)}
line-height: 0; /* Remove stray gaps around inline images */
}
 
/* Ensure the actual <img> gets the border and scales to the card width.
/* CTA */
MediaWiki adds class "mw-file-element" to file-rendered images. */
.capsach-card__cta{margin-top:.5rem}
.cs-product-card__media .mw-file-element {
display: block;
width: 100%;
height: auto;
box-sizing: border-box;
border: 1px solid #a2a9b1; /* Wikimedia UI Base50; matches infobox/table border tone */
background: #fff;
}
 
▲/* Placeholder whenif no imgimage iswas 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 */
.cs-product-card__cta {
margin-top: 10px;
}
Retrieved from "https://www.insurerbrain.com/wiki/Template:CS/products/card/styles.css"