https://wiki.tribesdepot.com/index.php?action=history&feed=atom&title=Template%3ACard%2Fstyles.css 2026-04-03T19:12:03Z Revision history for this page on the wiki MediaWiki 1.44.0 https://wiki.tribesdepot.com/index.php?title=Template:Card/styles.css&diff=8287&oldid=prev 2023-12-23T18:01:30Z

<p>Created page with &quot;.card { display: flex; min-width: 240px; max-width: 100%; box-sizing: border-box; flex-direction: column; flex-grow: 1; justify-content: space-between; margin: 0 0.2rem 0.4rem 0.2rem; background-color: var( --color-surface-1 ); border: 1px solid var( --border-color-base ); border-radius: var( --border-radius--medium ); box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.03 ), 0 1px 2px rgba( 0, 0, 0, 0.06 ); font-size: 0.875rem; transition: box-shadow 0.2s ease; } .car...&quot;</p> <p><b>New page</b></p><div>.card {<br /> display: flex;<br /> min-width: 240px;<br /> max-width: 100%;<br /> box-sizing: border-box;<br /> flex-direction: column;<br /> flex-grow: 1;<br /> justify-content: space-between;<br /> margin: 0 0.2rem 0.4rem 0.2rem;<br /> background-color: var( --color-surface-1 );<br /> border: 1px solid var( --border-color-base );<br /> border-radius: var( --border-radius--medium );<br /> box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.03 ), 0 1px 2px rgba( 0, 0, 0, 0.06 );<br /> font-size: 0.875rem;<br /> transition: box-shadow 0.2s ease;<br /> }<br /> <br /> .card:hover {<br /> box-shadow: 0 10px 20px rgba( 0, 0, 0, 0.0475 ), 0 6px 6px rgba( 0, 0, 0, 0.0575 );<br /> }<br /> <br /> .card-col2 {<br /> width: calc( 100% / 2 - 0.4rem );<br /> }<br /> <br /> .card-col3 {<br /> width: calc( 100% / 3 - 0.4rem );<br /> }<br /> <br /> .card-col4 {<br /> width: calc( 100% / 4 - 0.4rem );<br /> }<br /> <br /> .card-col5 {<br /> width: calc( 100% / 5 - 0.4rem );<br /> }<br /> <br /> .card-col6 {<br /> width: calc( 100% / 6 - 0.4rem );<br /> }<br /> <br /> .card-container {<br /> margin-top: 1.6rem !important;<br /> margin-right: -0.2rem;<br /> margin-bottom: 1.6rem !important;<br /> margin-left: -0.2rem;<br /> border-radius: 0 0 12px 12px;<br /> }<br /> <br /> .card-container.floatnone {<br /> padding: 0 20px;<br /> }<br /> <br /> .card-row {<br /> display: flex;<br /> width: 100%;<br /> flex-wrap: wrap;<br /> }<br /> <br /> .card-caption {<br /> font-size: 0.875rem;<br /> font-weight: 600;<br /> }<br /> <br /> .card-image a {<br /> display: flex;<br /> overflow: hidden;<br /> justify-content: center;<br /> background: none !important;<br /> }<br /> <br /> .card-image a img {<br /> transition: transform 0.2s cubic-bezier( 0.77, 0.2, 0.05, 1 );<br /> }<br /> <br /> .card:hover .card-image a img {<br /> transform: scale( 1.1 );<br /> }<br /> <br /> .card .card-title {<br /> margin-top: 0;<br /> margin-bottom: 0.8rem;<br /> color: var( --color-base--emphasized );<br /> font-size: 1.25rem;<br /> font-weight: 600;<br /> line-height: 1.2;<br /> }<br /> <br /> /* CSS hack */<br /> .card .card-title + .byline-bottom {<br /> margin-top: -0.6rem;<br /> }<br /> <br /> .card ol,<br /> .card ul {<br /> padding-left: 1.6rem;<br /> margin: 0;<br /> }<br /> <br /> .card .byline-top,<br /> .card .byline-bottom {<br /> color: var( --color-base );<br /> font-size: 0.825rem;<br /> }<br /> <br /> .card .byline-top {<br /> margin: 0 0 0.2rem 0;<br /> }<br /> <br /> .card .byline-bottom {<br /> margin: 0.2rem 0 1.6rem 0;<br /> }<br /> <br /> .card .byline-bottom + p {<br /> margin-top: 0.8rem;<br /> }<br /> <br /> .card .numdata {<br /> margin-top: 0.8rem;<br /> }<br /> <br /> .card-top,<br /> .card-bottom {<br /> padding: 1.2rem;<br /> }<br /> <br /> .card-button {<br /> background: var( --color-base );<br /> border-radius: 0 0 var( --border-radius--medium ) var( --border-radius--medium );<br /> transition: opacity 0.2s ease;<br /> }<br /> <br /> .card-button:hover {<br /> opacity: 0.8;<br /> }<br /> <br /> .card-button a {<br /> display: block;<br /> padding: 0.6rem;<br /> /* Cancel out a styles */<br /> background: none !important;<br /> color: #fff;<br /> font-size: 0.875rem;<br /> font-weight: 600;<br /> letter-spacing: 0.25px;<br /> text-align: center;<br /> transition: background 0.2s ease, color 0.2s ease;<br /> }<br /> <br /> .card-bottom {<br /> background: var( --color-surface-2 );<br /> }<br /> <br /> @media only screen and ( max-width: 720px ) {<br /> .card-row {<br /> overflow: auto;<br /> width: auto;<br /> flex-wrap: nowrap;<br /> padding: 0 20px;<br /> margin: 0 -20px;<br /> }<br /> }</div>

Bigwig