Insurer Brain

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

Browse history interactively
Newer edit →
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
Line 1:
/* 2) 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:ellipsis}
/* Media area: 2:3 aspect ratio and full-width image */
.capsach-card__media{position:relative;overflow:hidden;border-radius:.75rem;background-color:#f5f6f7}
.capsach-card__media-linkcard__ratio{display:block;colorwidth:100%;height:inherit0;textpadding-decorationtop:none150%} /* 3/2 = 150% */
.capsach-card__media-inner{position:absolute;lefttop:0;right:0;bottom:0;left:0}▼
.capsach-card__imgcard__media-inner a{display:block;width:100%;height:auto100%}
.capsach-card__media-inner img{display:block;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}
 
/* Placeholder: 16:10when intrinsicno ratioimg withoutis aspect-ratioprovided */
.capsach-card__placeholder{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(180deg,#f2f3f5,#e6e7e9)}
display:block;
width:100%;
height:0; /* create intrinsic box */
padding-top:62.5%; /* 10 / 16 = 0.625 */
background-image:linear-gradient(180deg,#f2f3f5,#e6e7e9);
}
 
/* CTA */
.capsach-card__overlay{
▲ 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) */
}
 
.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}
 
@media (min-width:768px){
.capsach-card__title{font-size:1.15em}
}
Retrieved from "https://www.insurerbrain.com/wiki/Template:CS/products/card/styles.css"