MediaWiki:Card.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.
.card-container {
display: inline-flex;
flex-direction: column;
align-items: center;
position: relative;
vertical-align: top;
text-align: center;
gap: 2px;
margin: 2px;
}
/* Disable hover for cards with mobile inline-block style */
.card-container.wds-dropdown::before,
.card-container.wds-dropdown::after {
display: none !important;
}
.card-wrapper {
display: block;
position: relative;
}
.card-body {
display: block;
width: min-content;
box-shadow: 0 0 5px #43403D;
/*
Apply border radius and overflow: hidden on an element with static positioning--
this way, children get rounded corners unless they use position: absolute.
*/
border-radius: 5px;
overflow: hidden;
background: #E9E5DC;
/* Fix background showing through rounded corners of child image */
background: linear-gradient(transparent 10px, #E9E5DC 10px
/* arbitrary value > border-radius */
);
text-align: center;
}
.mini-card .card-body {
border-radius: 7px;
background: none;
}
.card-body:hover {
outline: solid 2px #E9E5DC;
}
.card-image-container, .card-image-container figure {
display: flex;
width: 74px;
height: 74px;
border-bottom-right-radius: 14px;
overflow: hidden;
/* center images that are not square */
align-items: center;
justify-content: center;
}
.mini-card .card-image-container, .mini-card .card-image-container figure {
width: 48px;
height: 48px;
border-bottom-right-radius: initial;
background-size: cover !important;
}
.mini-card .card-image-container img {
width: 48px;
height: 48px;
}
/* Mini on desktop, not so mini */
.skin-fandomdesktop .mini-card {
.card-image-container, .card-image-container figure {
width: 56px;
height: 56px;
}
.card-image-container img {
width: 56px;
height: 56px;
}
.card-caption {
width: 56px;
}
.card-image-container a.new {
height: 56px;
width: 56px;
background-image: url(https://static.wikia.nocookie.net/gensin-impact/images/4/4a/Item_Unknown.png/revision/latest/scale-to-width-down/56);
}
}
/* Mini on mobile */
.skin-fandommobile .mini-card .card-icon img {
width: 10px;
height: 10px;
}
.skin-fandommobile .card-image-container img {
border: none;
width: 74px;
height: 74px;
object-fit: contain;
}
.skin-fandommobile .mini-card .card-image-container img {
width: 48px;
height: 48px;
}
.skin-fandommobile .card-image-container figure {
margin-bottom: 0;
}
.card-text {
display: block;
font-size: 12px;
line-height: 16px;
height: 16px;
/* only show 1 line of text */
overflow-wrap: anywhere;
/* Push text down a bit. This means that the bottom 2px will overflow/be hidden. */
position: relative;
top: 2px;
text-align: center;
}
.mini-card .card-text {
position: absolute;
bottom: 0;
top: unset;
font-size: 9px;
width: 100%;
background: rgba(27, 29, 36, 0.7);
color: #FFF;
height: 12px;
line-height: 10px;
overflow: hidden;
border-radius: 0 0 6px 6px;
word-break: break-all;
padding: 1px 0;
&:hover {
height: unset;
overflow: auto;
max-height: 100%;
scrollbar-width: thin;
}
}
.card-text.multi-line {
height: auto;
}
.card-text-small {
font-size: 10px;
line-height: 14px;
}
.card-text-smaller {
font-size: 8px;
line-height: 14px;
}
.card-font {
color: #495366;
font-family: "Genshin";
}
.card-refinement {
position: absolute;
top: 1px;
left: 1px;
width: 13px;
height: 13px;
border-radius: 3px;
font-size: 12px;
font-weight: 500;
line-height: 13px;
text-align: center;
}
.card-refinement::first-letter {
font-size: 0;
}
.card-refinement.refine-1, .card-refinement.refine-2, .card-refinement.refine-3, .card-refinement.refine-4 {
background-color: rgba(67, 67, 67, 0.8);
color: #CCCCCC;
}
.card-refinement.refine-5, .card-refinement.refine-1a {
background-color: rgba(211, 127, 50, 0.8);
color: #FFD816;
}
.card-constellation {
position: absolute;
left: 2px;
bottom: 18px;
width: 13px;
height: 13px;
border-radius: 3px;
font-size: 12px;
font-weight: 500;
line-height: 13px;
text-align: center;
background-color: rgba(67, 67, 67, 0.8);
color: #CCCCCC;
}
.card-constellation::first-letter {
font-size: 0;
}
.card-constellation.constellation-6 {
background-color: rgba(249, 214, 78, 0.8);
color: #935A28;
}
.card-icon {
position: absolute;
top: 1px;
left: 1px;
line-height: 0; /* prevent contents from being vertically displaced by line height */
z-index: 1;
}
.card-icon-right {
position: absolute;
top: 1px;
right: 1px;
line-height: 0; /* prevent contents from being vertically displaced by line height */
}
.card-icon-bottom-left {
position: absolute;
bottom: 17px;
left: 1px;
line-height: 0; /* prevent contents from being vertically displaced by line height */
}
.card-icon-bottom-right {
position: absolute;
bottom: 17px;
right: 1px;
line-height: 0; /* prevent contents from being vertically displaced by line height */
}
.card-equipped {
position: absolute;
top: 0;
right: 0;
border-radius: 15px;
box-shadow: 0 0 0 1pt #B9B9B5;
background: #485467;
background: rgba(72, 84, 103, 0.85);
width: 30px;
height: 30px;
overflow: hidden;
line-height: 0;
/* prevent contents from being vertically displaced by line height */
/* center horizontally and align bottom */
display: flex;
flex-flow: column-reverse;
align-items: center;
}
.card-set-container {
position: absolute;
top: 0px;
right: 0px;
padding: 1px;
line-height: 0;
/* prevent contents from being vertically displaced by line height */
border-radius: 0px 5px 0px 5px;
background-color: #e0e0e0;
}
.card-stars {
display: block;
height: 16px;
width: 100%;
position: absolute;
top: 62px;
/* 12px from the bottom of the card; 4px overlapping with card text */
line-height: 0;
/* prevent contents from being vertically displaced by line height */
pointer-events: none;
}
.card-caption {
width: 74px;
line-height: 1;
font-size: 12px;
hyphens: auto;
overflow-wrap: break-word;
}
.mini-card .card-caption {
width: 48px;
}
.card-caption.auto-width {
width: min-content;
/* wrap based on max word length */
max-width: 100%;
/* wrap if >100% */
min-width: 100%;
/* don't wrap early if <100% */
hyphens: none;
overflow-wrap: normal;
}
/* Mobile list formatting */
.skin-fandomdesktop .card-mobile-text {
display: none;
}
.skin-fandommobile .card-mobile-list .card-container {
display: block;
text-align: left;
margin: 0;
}
.skin-fandommobile .card-mobile-list .card-body {
text-align: left
}
.skin-fandommobile .card-mobile-list .card-body,
.skin-fandommobile .card-mobile-list .card-body:hover,
.skin-fandommobile .card-mobile-list .card-image-container {
background: none;
box-shadow: none;
outline: none;
}
.skin-fandommobile .card-mobile-list .card-stars,
.skin-fandommobile .card-mobile-list .card-set-container,
.skin-fandommobile .card-mobile-list .card-equipped,
.skin-fandommobile .card-mobile-list .card-text,
.skin-fandommobile .card-mobile-list .card-caption,
.skin-fandommobile .card-mobile-list .card-refinement,
.skin-fandommobile .card-mobile-list .card-constellation,
.skin-fandommobile .card-mobile-list .card-equipped {
display: none;
}
.skin-fandommobile .card-mobile-list .card-image-container img {
width: 30px;
height: 30px;
}
.skin-fandommobile .card-mobile-list .card-wrapper,
.skin-fandommobile .card-mobile-list .card-body,
.skin-fandommobile .card-mobile-list .card-image-container,
.skin-fandommobile .card-mobile-list .card-image-container figure,
.skin-fandommobile .card-mobile-list .card-image-container figure a {
display: inline
}
.skin-fandommobile .card-mobile-list .card-icon,
.skin-fandommobile .card-mobile-list .card-icon-right {
position: relative;
}
/* Hide unknown images */
.card-image-container a.new {
display: block;
height: 74px;
width: 74px;
background-image: url(https://static.wikia.nocookie.net/gensin-impact/images/4/4a/Item_Unknown.png/revision/latest/scale-to-width-down/74);
background-size: cover;
font-size: 0;
}
.mini-card .card-image-container a.new {
display: block;
height: 48px;
width: 48px;
background-image: url(https://static.wikia.nocookie.net/gensin-impact/images/4/4a/Item_Unknown.png/revision/latest/scale-to-width-down/48);
background-size: cover;
font-size: 0;
}
/* Rarity backgrounds */
.card-rarity-0, .card-rarity-1, .card-quality-0, .card-quality-1 {
background: #a4a4a4;
background: linear-gradient(0deg, #a4a4a4 0%, #76787c 100%);
background: url(https://static.wikia.nocookie.net/gensin-impact/images/d/d0/Quality_1_background.png/revision/latest/scale-to-width-down/74);
}
.card-rarity-2, .card-quality-2 {
background: #5D8C81;
background: linear-gradient(0deg, #5D8C81 0%, #4E7E6C 100%);
background: url(https://static.wikia.nocookie.net/gensin-impact/images/7/71/Quality_2_background.png/revision/latest/scale-to-width-down/74);
}
.card-rarity-3, .card-quality-3 {
background: #6faaca;
background: linear-gradient(0deg, #6faaca 0%, #697b9b 100%);
background: url(https://static.wikia.nocookie.net/gensin-impact/images/4/42/Quality_3_background.png/revision/latest/scale-to-width-down/74);
}
.card-rarity-4, .card-quality-4 {
background: #917ab1;
background: linear-gradient(0deg, #917ab1 0%, #6c6192 100%);
background: url(https://static.wikia.nocookie.net/gensin-impact/images/7/7e/Quality_4_background.png/revision/latest/scale-to-width-down/74);
}
.card-rarity-5, .card-quality-5 {
background: #9a6d43;
background: linear-gradient(0deg, #de9552 0%, #9a6d43 100%);
background: url(https://static.wikia.nocookie.net/gensin-impact/images/8/84/Quality_5_background.png/revision/latest/scale-to-width-down/74);
}
.card-rarity-5a, .card-quality-5a {
background: #AF5155;
background: linear-gradient(0deg, #DA4F55 0%, #AF5155 100%);
background: url(https://static.wikia.nocookie.net/gensin-impact/images/b/b0/Quality_5a_background.png/revision/latest/scale-to-width-down/74);
}
.card-rarity-123, .card-rarity-1-2-3, .card-rarity-1-3, .card-quality-123, .card-quality-1-2-3, .card-quality-1-3 {
background: #a4a4a4;
background: linear-gradient(0deg, #a4a4a4 0%, #76787c 100%);
background: conic-gradient(#76787c 0deg 60deg, #658CAF 60deg 180deg, #5D8C81 180deg 300deg, #76787c 300deg);
background: url(https://static.wikia.nocookie.net/gensin-impact/images/3/33/Quality_1-3_background.png/revision/latest/scale-to-width-down/74);
}
.card-rarity-23, .card-rarity-2-3, .card-quality-23, .card-quality-2-3 {
background: #5D8C81;
background: linear-gradient(0deg, #5D8C81 0%, #4E7E6C 100%);
background: conic-gradient(#5D8C81 0deg 45deg, #658CAF 45deg 225deg, #5D8C81 225deg 360deg);
background: url(https://static.wikia.nocookie.net/gensin-impact/images/3/3a/Quality_2-3_background.png/revision/latest/scale-to-width-down/74);
}
.card-rarity-34, .card-rarity-3-4, .card-quality-34, .card-quality-3-4 {
background: #6faaca;
background: linear-gradient(0deg, #6faaca 0%, #697b9b 100%);
background: conic-gradient(#697b9b 0deg 45deg, #917ab1 45deg 225deg, #697b9b 225deg 360deg);
background: url(https://static.wikia.nocookie.net/gensin-impact/images/2/27/Quality_3-4_background.png/revision/latest/scale-to-width-down/74);
}
.card-rarity-45, .card-rarity-4-5, .card-quality-45, .card-quality-4-5 {
background: #78609E;
background: linear-gradient(0deg, #78609E 0%, #78609E 100%);
background: conic-gradient(#6c6192 0deg 45deg, #de9552 45deg 225deg, #6c6192 225deg 360deg);
background: url(https://static.wikia.nocookie.net/gensin-impact/images/e/e6/Quality_4-5_background.png/revision/latest/scale-to-width-down/74);
}
.mini-card .card-rarity-0, .mini-card .card-rarity-1, .mini-card .card-quality-0, .mini-card .card-quality-1 {
background: #a4a4a4;
background: linear-gradient(0deg, #a4a4a4 0%, #76787c 100%);
background: url(https://static.wikia.nocookie.net/gensin-impact/images/9/92/Quality_Mini_1_Background.png/revision/latest/scale-to-width-down/48);
}
.mini-card .card-rarity-2, .mini-card .card-quality-2 {
background: #5D8C81;
background: linear-gradient(0deg, #5D8C81 0%, #4E7E6C 100%);
background: url(https://static.wikia.nocookie.net/gensin-impact/images/0/09/Quality_Mini_2_Background.png/revision/latest/scale-to-width-down/48);
}
.mini-card .card-rarity-3, .mini-card .card-quality-3 {
background: #6faaca;
background: linear-gradient(0deg, #6faaca 0%, #697b9b 100%);
background: url(https://static.wikia.nocookie.net/gensin-impact/images/f/f8/Quality_Mini_3_Background.png/revision/latest/scale-to-width-down/48);
}
.mini-card .card-rarity-4, .mini-card .card-quality-4 {
background: #917ab1;
background: linear-gradient(0deg, #917ab1 0%, #6c6192 100%);
background: url(https://static.wikia.nocookie.net/gensin-impact/images/e/ee/Quality_Mini_4_Background.png/revision/latest/scale-to-width-down/48);
}
.mini-card .card-rarity-5, .mini-card .card-quality-5 {
background: #9a6d43;
background: linear-gradient(0deg, #de9552 0%, #9a6d43 100%);
background: url(https://static.wikia.nocookie.net/gensin-impact/images/b/b1/Quality_Mini_5_Background.png/revision/latest/scale-to-width-down/48);
}
.mini-card .card-rarity-5a, .mini-card .card-quality-5a {
background: #AF5155;
background: linear-gradient(0deg, #DA4F55 0%, #AF5155 100%);
background: url(https://static.wikia.nocookie.net/gensin-impact/images/f/f7/Quality_Mini_5a_Background.png/revision/latest/scale-to-width-down/48);
}
.mini-card .card-rarity-123, .mini-card .card-rarity-1-2-3, .mini-card .card-rarity-1-3, .mini-card .card-quality-123, .mini-card .card-quality-1-2-3, .mini-card .card-quality-1-3 {
background: #a4a4a4;
background: linear-gradient(0deg, #a4a4a4 0%, #76787c 100%);
background: conic-gradient(#76787c 0deg 60deg, #658CAF 60deg 180deg, #5D8C81 180deg 300deg, #76787c 300deg);
background: url(https://static.wikia.nocookie.net/gensin-impact/images/d/d8/Quality_Mini_1-3_Background.png/revision/latest/scale-to-width-down/74);
}
.mini-card .card-rarity-23, .mini-card .card-rarity-2-3, .mini-card .card-quality-23, .mini-card .card-quality-2-3 {
background: #5D8C81;
background: linear-gradient(0deg, #5D8C81 0%, #4E7E6C 100%);
background: conic-gradient(#5D8C81 0deg 45deg, #658CAF 45deg 225deg, #5D8C81 225deg 360deg);
background: url(https://static.wikia.nocookie.net/gensin-impact/images/f/f1/Quality_Mini_2-3_Background.png/revision/latest/scale-to-width-down/74);
}
.mini-card .card-rarity-34, .mini-card .card-rarity-3-4, .mini-card .card-quality-34, .mini-card .card-quality-3-4 {
background: #6faaca;
background: linear-gradient(0deg, #6faaca 0%, #697b9b 100%);
background: conic-gradient(#697b9b 0deg 45deg, #917ab1 45deg 225deg, #697b9b 225deg 360deg);
background: url(https://static.wikia.nocookie.net/gensin-impact/images/0/02/Quality_Mini_3-4_Background.png/revision/latest/scale-to-width-down/74);
}
.mini-card .card-rarity-45, .mini-card .card-rarity-4-5, .mini-card .card-quality-45, .mini-card .card-quality-4-5 {
background: #78609E;
background: linear-gradient(0deg, #78609E 0%, #78609E 100%);
background: conic-gradient(#6c6192 0deg 45deg, #de9552 45deg 225deg, #6c6192 225deg 360deg);
background: url(https://static.wikia.nocookie.net/gensin-impact/images/e/eb/Quality_Mini_4-5_Background.png/revision/latest/scale-to-width-down/74);
}
.miliastra-wonderland .card-image-container {
border-bottom-right-radius: 0;
}
.miliastra-wonderland .card-quality-0,
.miliastra-wonderland .card-quality-1 {
background: #a4a4a4;
background: linear-gradient(0deg, #a4a4a4 0%, #76787c 100%);
background: url(https://static.wikia.nocookie.net/gensin-impact/images/7/7e/Quality_Miliastra_Wonderland_1_Background.png/revision/latest/scale-to-width-down/74);
}
.miliastra-wonderland .card-quality-2 {
background: #5D8C81;
background: linear-gradient(0deg, #5D8C81 0%, #4E7E6C 100%);
background: url(https://static.wikia.nocookie.net/gensin-impact/images/6/65/Quality_Miliastra_Wonderland_2_Background.png/revision/latest/scale-to-width-down/74);
}
.miliastra-wonderland .card-quality-3 {
background: #6faaca;
background: linear-gradient(0deg, #6faaca 0%, #697b9b 100%);
background: url(https://static.wikia.nocookie.net/gensin-impact/images/4/43/Quality_Miliastra_Wonderland_3_Background.png/revision/latest/scale-to-width-down/74);
}
.miliastra-wonderland .card-quality-4 {
background: #917ab1;
background: linear-gradient(0deg, #917ab1 0%, #6c6192 100%);
background: url(https://static.wikia.nocookie.net/gensin-impact/images/e/e3/Quality_Miliastra_Wonderland_4_Background.png/revision/latest/scale-to-width-down/74);
}
.miliastra-wonderland .card-quality-5 {
background: #9a6d43;
background: linear-gradient(0deg, #de9552 0%, #9a6d43 100%);
background: url(https://static.wikia.nocookie.net/gensin-impact/images/9/95/Quality_Miliastra_Wonderland_5_Background.png/revision/latest/scale-to-width-down/74);
}
/* Card list styling */
.card-list-container {
text-align: left;
}