Insurer Brain

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

Browse history interactively
Content deleted Content added
Created page with "→Template:CS/products/card/styles.css (fixed for TemplateStyles): .capsach-card{width:100%;max-width:480px;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} .capsach-align-right{margin-left:auto;margin-right:0;text-align:left} .capsach-card__title{margin:0 0 .5rem 0;font-weight:600;font-size:1.1em;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:elli..."
 
No edit summary
 
(9 intermediate revisions by the same user not shown)
Line 1:
.capsach-align{display:block;}▼
/* Template:CS/products/card/styles.css (fixed for TemplateStyles) */
.capsach-cardalign-left{width:100%;maxtext-widthalign:480pxleft;margin:0}
.capsach-align-leftcenter{margin-left:0;margin-right:auto;text-align:leftcenter;}
.capsach-align-centerright{margintext-leftalign:auto;margin-right:auto;text-align:left}
.capsach-align-right{margin-left:auto;margin-right:0;text-align:left}
.capsach-card__title{margin:0 0 .5rem 0;font-weight:600;font-size:1.1em;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.capsach-card__media{position:relative;overflow:hidden;border-radius:.75rem;background-color:#f5f6f7}
.capsach-card__media-link{display:block;color:inherit;text-decoration:none}
.capsach-card__img{display:block;width:100%;height:auto}
 
.cs-product-card{display:inline-block;width:300px;vertical-align:top;}
/* Placeholder: 16:10 intrinsic ratio without aspect-ratio */
.capsach-card__placeholder{
▲ display:block;
width:100%;
height:0; /* create intrinsic box */
padding-top:62.5%; /* 10 / 16 = 0.625 */
background-image:linear-gradient(180deg,#f2f3f5,#e6e7e9);
}
 
.cs-product-card__media{line-height:0;}
.capsach-card__overlay{
.cs-product-card__media .mw-file-element{display:block;width:100%;height:auto;box-sizing:border-box;border:1px solid #a2a9b1;background:#fff;}
position:absolute;left:0;right:0;bottom:0;
padding:.5rem;
display:flex;gap:.5rem;flex-wrap:wrap;align-items:flex-end;
background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0))
/* no pointer-events (not allowed by TemplateStyles) */
}
 
.cs-product-card__placeholder{display:block;width:300px;box-sizing:border-box;border:1px solid #a2a9b1;background:#f8f9fa;padding-top:66.6667%;}
.capsach-chip{
display:inline-flex;
max-width:calc(50% - .375rem);
padding:.375rem .625rem;
border-radius:999px;
line-height:1.2;
font-size:.875em;
box-shadow:0 0 0 1px rgba(255,255,255,.15) inset;
overflow:hidden;
}
.capsach-chip__text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.capsach-chip--badge{background:rgba(0,0,0,.78);color:#fff}
.capsach-chip--price{background:rgba(255,255,255,.95);color:#202122;box-shadow:0 0 0 1px rgba(0,0,0,.08) inset}
.capsach-card__cta{margin-top:.5rem}▼
 
▲.capsachcs-product-card__cta{margin-top:.5rem10px;}
@media (min-width:768px){
.capsach-card__title{font-size:1.15em}
}
Retrieved from "https://www.insurerbrain.com/wiki/Template:CS/products/card/styles.css"