https://wiki.cosmicpe.me/index.php?action=history&feed=atom&title=Template%3ACard%2Fstyles.css 2026-07-21T11:07:25Z Revision history for this page on the wiki MediaWiki 1.43.0 https://wiki.cosmicpe.me/index.php?title=Template:Card/styles.css&diff=1195&oldid=prev 2025-03-01T04:44:18Z

<p>Created page with &quot;.t-card { --t-card-image-color_r: 0; --t-card-image-color_g: 0; --t-card-image-color_b: 0; position: relative; background-color: var(--color-surface-1); border: 1px solid var(--border-color-base); border-radius: var(--border-radius-medium); overflow: hidden; display: flex; flex-direction: column; } .t-card-header, .t-card-footer { padding: 0.5rem 1rem; background: var(--color-surface-3); } .t-card-footer { font-size: var(--font-size-small); } .template-f...&quot;</p> <p><b>New page</b></p><div>.t-card {<br /> --t-card-image-color_r: 0;<br /> --t-card-image-color_g: 0;<br /> --t-card-image-color_b: 0;<br /> <br /> position: relative;<br /> background-color: var(--color-surface-1);<br /> border: 1px solid var(--border-color-base);<br /> border-radius: var(--border-radius-medium);<br /> overflow: hidden;<br /> display: flex;<br /> flex-direction: column;<br /> }<br /> <br /> .t-card-header,<br /> .t-card-footer {<br /> padding: 0.5rem 1rem;<br /> background: var(--color-surface-3);<br /> }<br /> <br /> .t-card-footer {<br /> font-size: var(--font-size-small);<br /> }<br /> <br /> .template-flexbox-item .t-card {<br /> height: 100%;<br /> }<br /> <br /> .t-card blockquote {<br /> margin-left: 0;<br /> margin-right: 0;<br /> }<br /> <br /> .t-card-image {<br /> position: relative;<br /> display: flex;<br /> flex-grow: 1;<br /> }<br /> <br /> .t-card-afterImage {<br /> position: relative;<br /> margin-top: -0.5rem;<br /> padding: 0 1rem 1rem 1rem;<br /> background-color: rgb(<br /> var(--t-card-image-color_r),<br /> var(--t-card-image-color_g),<br /> var(--t-card-image-color_b)<br /> );<br /> }<br /> <br /> .t-card-afterImage a {<br /> color: #fff;<br /> }<br /> <br /> .t-card-afterImage,<br /> .t-card-label,<br /> .t-card-caption {<br /> font-size: var(--font-size-x-small);<br /> }<br /> <br /> .t-card-label {<br /> position: absolute;<br /> top: 0;<br /> left: 0;<br /> z-index: 1;<br /> }<br /> <br /> .t-card-label &gt; a,<br /> .t-card-label &gt; span {<br /> display: flex;<br /> align-items: center;<br /> height: 32px;<br /> padding: 0 12px;<br /> border-bottom-right-radius: var(--border-radius-medium);<br /> background: var(--color-progressive);<br /> color: var(--color-inverted-progressive);<br /> line-height: 1;<br /> }<br /> <br /> .t-card-label &gt; a:hover {<br /> background: var(--color-progressive--hover);<br /> }<br /> <br /> .t-card-label &gt; a:active {<br /> background: var(--color-progressive--hover);<br /> }<br /> <br /> .t-card-content {<br /> padding: 1rem;<br /> }<br /> <br /> .t-card-label + .t-card-content {<br /> margin-top: 1.5rem;<br /> }<br /> <br /> .t-card-title {<br /> color: var(--color-emphasized);<br /> font-family: var(--font-family-heading);<br /> font-size: var(--font-size-x-large);<br /> font-weight: var(--font-weight-semi-bold);<br /> line-height: var(--line-height-xxx-small);<br /> }<br /> <br /> .t-card-caption {<br /> margin-top: 0.25rem;<br /> color: var(--color-subtle);<br /> line-height: var(--line-height-xx-small);<br /> }<br /> <br /> .t-card-title + .t-card-body,<br /> .t-card-caption + .t-card-body {<br /> margin-top: 1rem;<br /> }<br /> <br /> .t-card-background,<br /> .t-card-link {<br /> position: absolute;<br /> inset: 0;<br /> }<br /> <br /> .t-card-background {<br /> pointer-events: none;<br /> }<br /> <br /> .t-card-background::after {<br /> content: &quot;&quot;;<br /> position: absolute;<br /> left: 0;<br /> right: 0;<br /> bottom: 0;<br /> height: 50%;<br /> background: linear-gradient(<br /> to top,<br /> rgba(<br /> var(--t-card-image-color_r),<br /> var(--t-card-image-color_g),<br /> var(--t-card-image-color_b),<br /> 1<br /> )<br /> 0%,<br /> rgba(<br /> var(--t-card-image-color_r),<br /> var(--t-card-image-color_g),<br /> var(--t-card-image-color_b),<br /> 0.987<br /> )<br /> 8.1%,<br /> rgba(<br /> var(--t-card-image-color_r),<br /> var(--t-card-image-color_g),<br /> var(--t-card-image-color_b),<br /> 0.951<br /> )<br /> 15.5%,<br /> rgba(<br /> var(--t-card-image-color_r),<br /> var(--t-card-image-color_g),<br /> var(--t-card-image-color_b),<br /> 0.896<br /> )<br /> 22.5%,<br /> rgba(<br /> var(--t-card-image-color_r),<br /> var(--t-card-image-color_g),<br /> var(--t-card-image-color_b),<br /> 0.825<br /> )<br /> 29%,<br /> rgba(<br /> var(--t-card-image-color_r),<br /> var(--t-card-image-color_g),<br /> var(--t-card-image-color_b),<br /> 0.741<br /> )<br /> 35.3%,<br /> rgba(<br /> var(--t-card-image-color_r),<br /> var(--t-card-image-color_g),<br /> var(--t-card-image-color_b),<br /> 0.648<br /> )<br /> 41.2%,<br /> rgba(<br /> var(--t-card-image-color_r),<br /> var(--t-card-image-color_g),<br /> var(--t-card-image-color_b),<br /> 0.55<br /> )<br /> 47.1%,<br /> rgba(<br /> var(--t-card-image-color_r),<br /> var(--t-card-image-color_g),<br /> var(--t-card-image-color_b),<br /> 0.45<br /> )<br /> 52.9%,<br /> rgba(<br /> var(--t-card-image-color_r),<br /> var(--t-card-image-color_g),<br /> var(--t-card-image-color_b),<br /> 0.352<br /> )<br /> 58.8%,<br /> rgba(<br /> var(--t-card-image-color_r),<br /> var(--t-card-image-color_g),<br /> var(--t-card-image-color_b),<br /> 0.259<br /> )<br /> 64.7%,<br /> rgba(<br /> var(--t-card-image-color_r),<br /> var(--t-card-image-color_g),<br /> var(--t-card-image-color_b),<br /> 0.175<br /> )<br /> 71%,<br /> rgba(<br /> var(--t-card-image-color_r),<br /> var(--t-card-image-color_g),<br /> var(--t-card-image-color_b),<br /> 0.104<br /> )<br /> 77.5%,<br /> rgba(<br /> var(--t-card-image-color_r),<br /> var(--t-card-image-color_g),<br /> var(--t-card-image-color_b),<br /> 0.049<br /> )<br /> 84.5%,<br /> rgba(<br /> var(--t-card-image-color_r),<br /> var(--t-card-image-color_g),<br /> var(--t-card-image-color_b),<br /> 0.013<br /> )<br /> 91.9%,<br /> rgba(<br /> var(--t-card-image-color_r),<br /> var(--t-card-image-color_g),<br /> var(--t-card-image-color_b),<br /> 0<br /> )<br /> 100%<br /> );<br /> }<br /> <br /> .t-card-background--top img {<br /> object-position: top;<br /> }<br /> <br /> .t-card-background--bottom img {<br /> object-position: bottom;<br /> }<br /> <br /> .t-card-background img {<br /> width: 100%;<br /> height: 100%;<br /> object-fit: cover;<br /> transition: 100ms ease;<br /> transition-property: transform;<br /> }<br /> <br /> .t-card:hover .t-card-background img {<br /> transform: scale(1.1);<br /> }<br /> <br /> .t-card-link {<br /> opacity: 0;<br /> }<br /> <br /> .t-card-link &gt; a {<br /> display: block;<br /> height: 100%;<br /> }<br /> <br /> .t-card-image .t-card-content {<br /> position: relative;<br /> }<br /> <br /> .t-card-image .t-card-content {<br /> margin-top: auto;<br /> line-height: var(--line-height-xx-small);<br /> flex-grow: 1;<br /> }<br /> <br /> .t-card-image .t-card-title {<br /> color: #fff;<br /> }<br /> <br /> .t-card-image .t-card-caption,<br /> .t-card-afterImage {<br /> color: #ddd;<br /> }</div>

Muqsit