https://classic.pgnrp.com/index.php?action=history&feed=atom&title=Card%2Fstyles.css 2026-04-08T19:20:38Z Revision history for this page on the wiki MediaWiki 1.43.1 https://classic.pgnrp.com/index.php?title=Card/styles.css&diff=62&oldid=prev 2025-05-21T03:12:39Z

<p>1 revision imported</p> <table style="background-color: #fff; color: #202122;" data-mw="interface"> <tr class="diff-title" lang="en"> <td colspan="1" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td> <td colspan="1" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 03:12, 21 May 2025</td> </tr><tr><td colspan="2" class="diff-notice" lang="en"><div class="mw-diff-empty">(No difference)</div> </td></tr></table>

Maegnus https://classic.pgnrp.com/index.php?title=Card/styles.css&diff=61&oldid=prev 2025-02-28T04:43:14Z

<p>Undo revision <a href="/index.php/Special:Diff/419108" title="Special:Diff/419108">419108</a> by <a href="/index.php/Special:Contributions/Alistair3149" title="Special:Contributions/Alistair3149">Alistair3149</a> (<a href="/index.php?title=User_talk:Alistair3149&amp;action=edit&amp;redlink=1" class="new" title="User talk:Alistair3149 (page does not exist)">talk</a>)</p> <p><b>New page</b></p><div>.tg-card {<br /> --tg-card-image-color_r: 0;<br /> --tg-card-image-color_g: 0;<br /> --tg-card-image-color_b: 0;<br /> <br /> position: relative;<br /> background-color: var(--tg-color-surface-2);<br /> border: var(--tg-border-base);<br /> border-radius: var(--tg-border-radius-medium);<br /> overflow: hidden;<br /> display: flex;<br /> flex-direction: column;<br /> }<br /> <br /> .tg-card-header,<br /> .tg-card-footer {<br /> padding: 0.5rem 1rem;<br /> background: var(--tg-color-surface-3);<br /> }<br /> <br /> .tg-card-footer {<br /> font-size: var(--tg-font-size-small);<br /> }<br /> <br /> .template-flexbox-item .tg-card {<br /> height: 100%;<br /> }<br /> <br /> .tg-card blockquote {<br /> margin-left: 0;<br /> margin-right: 0;<br /> }<br /> <br /> .tg-card-image {<br /> position: relative;<br /> display: flex;<br /> flex-grow: 1;<br /> }<br /> <br /> .tg-card-afterImage {<br /> position: relative;<br /> margin-top: -0.5rem;<br /> padding: 0 1rem 1rem 1rem;<br /> background-color: rgb(<br /> var(--tg-card-image-color_r),<br /> var(--tg-card-image-color_g),<br /> var(--tg-card-image-color_b)<br /> );<br /> }<br /> <br /> .tg-card-afterImage a {<br /> color: #fff;<br /> }<br /> <br /> .tg-card-afterImage,<br /> .tg-card-label,<br /> .tg-card-caption {<br /> font-size: var(--tg-font-size-x-small);<br /> }<br /> <br /> .tg-card-label {<br /> position: absolute;<br /> top: 0;<br /> left: 0;<br /> z-index: 1;<br /> }<br /> <br /> .tg-card-label &gt; a,<br /> .tg-card-label &gt; span {<br /> display: flex;<br /> align-items: center;<br /> height: 32px;<br /> padding: 0 12px;<br /> border-bottom-right-radius: var(--tg-border-radius-medium);<br /> background: var(--tg-color-progressive);<br /> color: var(--tg-color-inverted-progressive);<br /> line-height: 1;<br /> }<br /> <br /> .tg-card-label &gt; a:hover {<br /> background: var(--tg-color-progressive--hover);<br /> }<br /> <br /> .tg-card-label &gt; a:active {<br /> background: var(--tg-color-progressive--hover);<br /> }<br /> <br /> .tg-card-content {<br /> padding: 1rem;<br /> }<br /> <br /> .tg-card-label + .tg-card-content {<br /> margin-top: 1.5rem;<br /> }<br /> <br /> .tg-card-title {<br /> color: var(--tg-color-emphasized);<br /> font-family: var(--tg-font-family-heading);<br /> font-size: var(--tg-font-size-x-large);<br /> font-weight: var(--tg-font-weight-semibold);<br /> line-height: var(--tg-line-height-xxx-small);<br /> }<br /> <br /> .tg-card-caption {<br /> margin-top: 0.25rem;<br /> color: var(--tg-color-subtle);<br /> line-height: var(--tg-line-height-xx-small);<br /> }<br /> <br /> .tg-card-title + .tg-card-body,<br /> .tg-card-caption + .tg-card-body {<br /> margin-top: 1rem;<br /> }<br /> <br /> .tg-card-background,<br /> .tg-card-link {<br /> position: absolute;<br /> inset: 0;<br /> }<br /> <br /> .tg-card-background {<br /> pointer-events: none;<br /> }<br /> <br /> .tg-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(--tg-card-image-color_r),<br /> var(--tg-card-image-color_g),<br /> var(--tg-card-image-color_b),<br /> 1<br /> )<br /> 0%,<br /> rgba(<br /> var(--tg-card-image-color_r),<br /> var(--tg-card-image-color_g),<br /> var(--tg-card-image-color_b),<br /> 0.987<br /> )<br /> 8.1%,<br /> rgba(<br /> var(--tg-card-image-color_r),<br /> var(--tg-card-image-color_g),<br /> var(--tg-card-image-color_b),<br /> 0.951<br /> )<br /> 15.5%,<br /> rgba(<br /> var(--tg-card-image-color_r),<br /> var(--tg-card-image-color_g),<br /> var(--tg-card-image-color_b),<br /> 0.896<br /> )<br /> 22.5%,<br /> rgba(<br /> var(--tg-card-image-color_r),<br /> var(--tg-card-image-color_g),<br /> var(--tg-card-image-color_b),<br /> 0.825<br /> )<br /> 29%,<br /> rgba(<br /> var(--tg-card-image-color_r),<br /> var(--tg-card-image-color_g),<br /> var(--tg-card-image-color_b),<br /> 0.741<br /> )<br /> 35.3%,<br /> rgba(<br /> var(--tg-card-image-color_r),<br /> var(--tg-card-image-color_g),<br /> var(--tg-card-image-color_b),<br /> 0.648<br /> )<br /> 41.2%,<br /> rgba(<br /> var(--tg-card-image-color_r),<br /> var(--tg-card-image-color_g),<br /> var(--tg-card-image-color_b),<br /> 0.55<br /> )<br /> 47.1%,<br /> rgba(<br /> var(--tg-card-image-color_r),<br /> var(--tg-card-image-color_g),<br /> var(--tg-card-image-color_b),<br /> 0.45<br /> )<br /> 52.9%,<br /> rgba(<br /> var(--tg-card-image-color_r),<br /> var(--tg-card-image-color_g),<br /> var(--tg-card-image-color_b),<br /> 0.352<br /> )<br /> 58.8%,<br /> rgba(<br /> var(--tg-card-image-color_r),<br /> var(--tg-card-image-color_g),<br /> var(--tg-card-image-color_b),<br /> 0.259<br /> )<br /> 64.7%,<br /> rgba(<br /> var(--tg-card-image-color_r),<br /> var(--tg-card-image-color_g),<br /> var(--tg-card-image-color_b),<br /> 0.175<br /> )<br /> 71%,<br /> rgba(<br /> var(--tg-card-image-color_r),<br /> var(--tg-card-image-color_g),<br /> var(--tg-card-image-color_b),<br /> 0.104<br /> )<br /> 77.5%,<br /> rgba(<br /> var(--tg-card-image-color_r),<br /> var(--tg-card-image-color_g),<br /> var(--tg-card-image-color_b),<br /> 0.049<br /> )<br /> 84.5%,<br /> rgba(<br /> var(--tg-card-image-color_r),<br /> var(--tg-card-image-color_g),<br /> var(--tg-card-image-color_b),<br /> 0.013<br /> )<br /> 91.9%,<br /> rgba(<br /> var(--tg-card-image-color_r),<br /> var(--tg-card-image-color_g),<br /> var(--tg-card-image-color_b),<br /> 0<br /> )<br /> 100%<br /> );<br /> }<br /> <br /> .tg-card-background--top img {<br /> object-position: top;<br /> }<br /> <br /> .tg-card-background--bottom img {<br /> object-position: bottom;<br /> }<br /> <br /> .tg-card-background img {<br /> width: 100%;<br /> height: 100%;<br /> object-fit: cover;<br /> transition: 100ms ease;<br /> transition-property: transform;<br /> }<br /> <br /> .tg-card:hover .tg-card-background img {<br /> transform: scale(1.1);<br /> }<br /> <br /> .tg-card-link {<br /> opacity: 0;<br /> }<br /> <br /> .tg-card-link &gt; a {<br /> display: block;<br /> height: 100%;<br /> }<br /> <br /> .tg-card-image .tg-card-content {<br /> position: relative;<br /> }<br /> <br /> .tg-card-image .tg-card-content {<br /> margin-top: auto;<br /> line-height: var(--tg-line-height-xx-small);<br /> flex-grow: 1;<br /> }<br /> <br /> .tg-card-image .tg-card-title {<br /> color: #fff;<br /> }<br /> <br /> .tg-card-image .tg-card-caption,<br /> .tg-card-afterImage {<br /> color: #ddd;<br /> }</div>

lotr>Alistair3149