Template:CS/products/card/styles.css: Difference between revisions
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: | Line 1: | ||
| ⚫ | |||
/* Template:CS/products/card/styles.css (fixed for TemplateStyles) */ |
|||
.capsach- |
.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{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{ |
|||
| ⚫ | |||
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} |
|||
| ⚫ | |||
| ⚫ | |||
@media (min-width:768px){ |
|||
.capsach-card__title{font-size:1.15em} |
|||
} |
|||
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;}