MediaWiki:TowerCard.css
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
.tower-card-grid {
--tc-w: 150px;
display: flex;
flex-wrap: wrap;
gap: calc(var(--tc-w) * .09);
padding: calc(var(--tc-w) * .05);
justify-content: center;
}
.tower-card {
--_w: var(--tc-w, 150px);
--tc-color: currentColor;
--tc-light: color-mix(in oklch, var(--tc-color) 50%, white);
--tc-stroke: oklch(0 0 0 / .85);
--tc-haze-top: .10;
--tc-haze-bottom: .24;
--tc-streak-fade: radial-gradient(ellipse closest-side, transparent 0%, transparent 62%, rgb(0 0 0 / .25) 76%, rgb(0 0 0 / .7) 90%, #000 100%);
--tc-info-top: 21.5%;
--tc-info-size: calc(var(--_w) * .13);
@media (pointer: coarse) { --tc-info-size: calc(var(--_w) * .16); }
position: relative;
box-sizing: border-box;
flex: 0 0 auto;
width: var(--_w);
aspect-ratio: 202 / 296;
overflow: hidden;
isolation: isolate;
border: calc(var(--_w) * .0125 + 1px) solid var(--tc-light);
border-radius: calc(var(--BorderRadius, .45rem) * 1.65);
background-color: var(--tc-color);
background-image:
linear-gradient(to bottom, oklch(0 0 0 / 0), transparent 25%, transparent 72%, oklch(0 0 0 / .14)),
linear-gradient(oklch(1 0 0 / var(--tc-haze-top)), oklch(1 0 0 / var(--tc-haze-bottom))),
radial-gradient(ellipse 72% 52% at 52% 55%, oklch(0 0 0 / .12) 0%, oklch(0 0 0 / .3) 45%, oklch(0 0 0 / .5) 85%, oklch(0 0 0 / .62) 100%);
line-height: 1.1;
text-align: center;
user-select: none;
transition: transform .12s ease-out, border-color .12s ease-out;
&::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: url("/images/c/c6/Images_Streaks.png") center / auto 100% no-repeat;
opacity: .04;
mix-blend-mode: plus-lighter;
-webkit-mask-image: var(--tc-streak-fade);
mask-image: var(--tc-streak-fade);
pointer-events: none;
}
&::before {
content: "";
position: absolute;
inset: 0;
z-index: 7;
background: url("/images/8/89/Images_ProductInnerGlowTight_70784928442253.png") 0 0 / 100% 100% no-repeat;
opacity: .15;
pointer-events: none;
}
&:hover {
transform: scale(1.06);
border-color: var(--theme-page-text-color);
border-width: calc(var(--_w) * .016 + 1px);
z-index: 27;
}
a.mw-file-source { display: none; }
sup.reference {
font-size: .72em;
line-height: 0;
vertical-align: .55em;
-webkit-text-stroke: 0;
text-shadow: 0 0 2px oklch(0 0 0), 0 0 1px oklch(0 0 0);
& a {
color: var(--tc-light) !important;
text-decoration: none;
}
}
&.tier-starter {
--tc-color: oklch(1 0 0);
--tc-haze-top: .16;
--tc-haze-bottom: .10;
}
&.tier-intermediate { --tc-color: oklch(.868 .279 144.346); }
&.tier-hardcore { --tc-color: oklch(.531 .293 293.94); }
&.tier-advanced { --tc-color: oklch(.707 .168 242.04); }
&.tier-evolved { --tc-color: oklch(.591 .209 258.35); }
&.tier-golden { --tc-color: oklch(.858 .175 88.49); }
&.tier-exclusive { --tc-color: oklch(.704 .198 358.46); }
&.tier-unavailable { --tc-color: oklch(.655 .231 26.4); }
}
.tower-card-link {
&::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background-color: oklch(0 0 0 / .08);
mask: url("/images/8/88/Images_PriceBackground_91405171197410.png") center / 145.75% 129.96% no-repeat;
pointer-events: none;
}
a {
position: absolute;
inset: 0;
z-index: 47;
font-size: 0;
color: transparent !important;
}
}
.tower-card-name,
.tower-card-tier,
.tower-card-price {
position: absolute;
left: 0;
right: 0;
z-index: 37;
white-space: nowrap;
-webkit-text-stroke: calc(var(--TextStrokeWidth, .16em) * 1.15) var(--tc-stroke);
paint-order: stroke fill;
pointer-events: none;
}
.tower-card-name {
top: 5.5%;
padding: 0 4%;
overflow: hidden;
color: oklch(1 0 0);
font-weight: 800;
font-size: min(calc(var(--_w) * .104), calc(var(--_w) * 1.35 / var(--tc-len, 1)));
letter-spacing: -.01em;
}
.tower-card-tier {
top: 14.6%;
color: var(--tc-light);
font-weight: 800;
font-size: calc(var(--_w) * .07);
-webkit-text-stroke-width: calc(var(--TextStrokeWidth, .16em) * 1.35);
.tower-card.tier-starter & { color: oklch(0.925 0 0); }
}
.tower-card-price {
left: 6%;
right: auto;
bottom: 4.6%;
display: flex;
align-items: center;
gap: calc(var(--_w) * .04);
max-width: 88%;
color: oklch(1 0 0);
font-weight: 800;
font-size: calc(var(--_w) * .118);
letter-spacing: -.01em;
img {
display: block;
width: calc(var(--_w) * .135) !important;
height: auto !important;
filter: drop-shadow(0 0 1px oklch(0 0 0 / .6));
}
:is(span[typeof="mw:File"], span[typeof="mw:File"] > span, picture) { display: flex; }
&:is(.n2, .n3) {
display: grid;
align-items: end;
clip-path: inset(-.14em -1em);
> .tower-card-method {
grid-area: 1 / 1;
animation: 7.2s linear infinite both tc-ticker-2;
will-change: transform, opacity;
}
}
&.n2 > .tower-card-method {
&:nth-child(1) { animation-delay: -7.2s; }
&:nth-child(2) { animation-delay: -3.6s; }
@media (prefers-reduced-motion: reduce) { animation-name: tc-fade-2; }
}
&.n3 > .tower-card-method {
animation-name: tc-ticker-3;
animation-duration: 10.8s;
&:nth-child(1) { animation-delay: -10.8s; }
&:nth-child(2) { animation-delay: -7.2s; }
&:nth-child(3) { animation-delay: -3.6s; }
@media (prefers-reduced-motion: reduce) { animation-name: tc-fade-3; }
}
}
@keyframes tc-ticker-2 {
0% { opacity: 1; transform: translateY(0); animation-timing-function: linear; }
41.667% { opacity: 1; transform: translateY(0); animation-timing-function: cubic-bezier(.55, 0, .8, .3); }
46.528% { opacity: 0; transform: translateY(-105%); animation-timing-function: step-end; }
46.6% { opacity: 0; transform: translateY(105%); }
95.139% { opacity: 0; transform: translateY(105%); animation-timing-function: cubic-bezier(.2, .7, .35, 1); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes tc-ticker-3 {
0% { opacity: 1; transform: translateY(0); animation-timing-function: linear; }
27.778% { opacity: 1; transform: translateY(0); animation-timing-function: cubic-bezier(.55, 0, .8, .3); }
31.019% { opacity: 0; transform: translateY(-105%); animation-timing-function: step-end; }
31.07% { opacity: 0; transform: translateY(105%); }
96.759% { opacity: 0; transform: translateY(105%); animation-timing-function: cubic-bezier(.2, .7, .35, 1); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes tc-fade-2 {
0%, 41.667% { opacity: 1; }
45.833%, 95.833% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes tc-fade-3 {
0%, 27.778% { opacity: 1; }
30.556%, 97.222% { opacity: 0; }
100% { opacity: 1; }
}
.tower-card-method {
display: flex;
align-items: center;
gap: calc(var(--_w) * .04);
&.combo {
flex-direction: column;
align-items: flex-start;
gap: calc(var(--_w) * .012);
}
> .tower-card-amount:only-child {
white-space: normal;
text-wrap: balance;
text-align: left;
}
}
.tower-card-cost {
display: flex;
align-items: center;
gap: calc(var(--_w) * .04);
& + & {
font-size: .8em;
&::before {
content: "+";
margin-right: -.12em;
}
img { width: calc(var(--_w) * .108) !important; }
}
}
.tower-card-render {
position: absolute;
left: -7%;
right: -7%;
top: 20%;
bottom: 1%;
z-index: 27;
display: flex;
align-items: flex-end;
justify-content: center;
& :is(span, a, picture) { display: contents; }
img {
display: block;
width: 100% !important;
height: 100% !important;
object-fit: contain;
object-position: 50% 100%;
}
}
.tower-card-reqs,
.tower-card-info,
.tower-card-note {
position: absolute;
z-index: 57;
-webkit-text-stroke: calc(var(--TextStrokeWidth, .16em) * .9) var(--tc-stroke);
paint-order: stroke fill;
}
.tower-card-reqs {
display: flex;
flex-direction: column;
align-items: flex-end;
top: var(--tc-info-top);
right: 4.5%;
max-width: 74%;
gap: calc(var(--_w) * .022);
pointer-events: none;
}
.tower-card-req {
display: inline-flex;
align-items: center;
gap: .3em;
padding: .2em .55em .2em .45em;
border: 1px solid color-mix(in oklch, var(--tc-light) 85%, transparent);
border-radius: var(--BorderRadiusCircle);
background: linear-gradient(oklch(0 0 0 / .42), oklch(0 0 0 / .66));
box-shadow: inset 0 1px 0 oklch(1 0 0 / .18), 0 1px 3px oklch(0 0 0 / .45);
color: oklch(1 0 0);
font-weight: 800;
font-size: calc(var(--_w) * .066);
line-height: 1.15;
white-space: nowrap;
pointer-events: auto;
.ego-i {
top: 0;
flex: none;
font-size: .9em;
color: var(--tc-light);
-webkit-text-stroke: 0;
filter: drop-shadow(0 0 1px oklch(0 0 0 / .9));
}
a {
color: inherit !important;
text-decoration: none;
}
:is(span[typeof="mw:File"], span[typeof="mw:File"] > span, picture) { display: contents; }
img {
width: auto !important;
height: 1.2em !important;
margin: -.1em 0;
filter: drop-shadow(0 0 1px oklch(0 0 0 / .8));
}
sup.reference { margin-left: -.15em; }
}
.tower-card-info {
top: var(--tc-info-top);
width: var(--tc-info-size);
height: var(--tc-info-size);
left: 4.5%;
box-sizing: border-box;
display: grid;
place-items: center;
border: 1px solid color-mix(in oklch, var(--tc-light) 85%, transparent);
border-radius: var(--BorderRadiusCircle);
background: linear-gradient(oklch(0 0 0 / .42), oklch(0 0 0 / .66));
box-shadow: inset 0 1px 0 oklch(1 0 0 / .18), 0 1px 3px oklch(0 0 0 / .45);
color: oklch(1 0 0);
font-size: calc(var(--_w) * .09);
cursor: pointer;
outline: none;
transition: background-color .15s, color .15s;
.ego-i { top: 0; -webkit-text-stroke: 0; }
&:focus-visible { box-shadow: 0 0 0 2px oklch(1 0 0), 0 0 0 4px oklch(0 0 0 / .6); }
.tower-card:has(.tower-card-note sup.reference) &::after {
content: "";
position: absolute;
top: -12%;
right: -12%;
width: 32%;
height: 32%;
border-radius: var(--BorderRadiusCircle);
background: var(--tc-light);
box-shadow: 0 0 0 1px oklch(0 0 0 / .7);
}
.tower-card:is(:hover, :focus-within) & {
background: var(--tc-light);
color: oklch(.15 0 0);
-webkit-text-stroke: 0;
}
}
.tower-card-note {
left: 5%;
right: 5%;
top: calc(var(--tc-info-top) + var(--tc-info-size) + var(--_w) * .03);
max-height: calc(100% - var(--tc-info-top) - var(--tc-info-size) - var(--_w) * .03 - 17%);
transform-origin: top;
box-sizing: border-box;
overflow: auto;
scrollbar-width: none;
padding: .45em .6em .5em;
border: 1px solid color-mix(in oklch, var(--tc-light) 70%, transparent);
border-radius: calc(var(--BorderRadius, .45rem) * 1.1);
background: linear-gradient(oklch(.2 0 0 / .86), oklch(.1 0 0 / .93));
box-shadow: 0 -2px 10px oklch(0 0 0 / .45), inset 0 1px 0 oklch(1 0 0 / .12);
color: oklch(1 0 0);
font-weight: 700;
font-size: calc(var(--_w) * .07);
line-height: 1.28;
text-align: left;
-webkit-text-stroke: 0;
user-select: text;
opacity: 0;
visibility: hidden;
transform: translateY(14%);
pointer-events: none;
transition: opacity .16s ease-out, transform .2s ease-out, visibility .2s;
@media (prefers-reduced-motion: reduce) { transform: none; transition: opacity .12s linear, visibility .12s; }
.tower-card:is(:hover, :focus-within) & {
opacity: 1;
visibility: visible;
transform: none;
pointer-events: auto;
}
a {
color: var(--tc-light) !important;
font-weight: 800;
&:hover { text-decoration: underline; }
}
}