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)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
.card_container {
position: relative;
width: 74px;
height: 90px;
margin: 2px !important;
display: inline-block;
border-radius: 5px;
box-shadow: 0 0 5px #000000;
text-align: center;
}
.card_0, .card_1 {
background: #a4a4a4;
background: linear-gradient(0deg, #a4a4a4 0%, #76787c 100%);
}
.card_2 {
background: #5D8C81;
background: linear-gradient(0deg, #5D8C81 0%, #4E7E6C 100%);
}
.card_3 {
background: #6faaca;
background: linear-gradient(0deg, #6faaca 0%, #697b9b 100%);
}
.card_4 {
background: #917ab1;
background: linear-gradient(0deg, #917ab1 0%, #6c6192 100%);
}
.card_5 {
background: #9a6d43;
background: linear-gradient(0deg, #de9552 0%, #9a6d43 100%);
}
.card_123, .card_1-2-3, .card_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);
}
.card_23, .card_2-3 {
background: #5D8C81;
background: linear-gradient(0deg, #5D8C81 0%, #4E7E6C 100%);
background: conic-gradient(#5D8C81 0deg 45deg, #658CAF 45deg 225deg, #5D8C81 225deg 360deg);
}
.card_34, .card_3-4 {
background: #6faaca;
background: linear-gradient(0deg, #6faaca 0%, #697b9b 100%);
background: conic-gradient(#697b9b 0deg 45deg, #917ab1 45deg 225deg, #697b9b 225deg 360deg);
}
.card_45, .card_4-5 {
background: #78609E;
background: linear-gradient(0deg, #78609E 0%, #78609E 100%);
background: conic-gradient(#6c6192 0deg 45deg, #de9552 45deg 225deg, #6c6192 225deg 360deg);
}
.card_image {
position: absolute;
top: 0px;
width: 74px;
height: 74px;
border-radius: 5px 5px 0px 0px;
}
.card_image img {
border-radius: 5px 5px 0px 0px;
}
.card_text {
position: absolute;
bottom: 0;
width: 100%;
height: 16px;
line-height: 16px;
background: #E9E5DC;
text-align: center;
border-radius: 0 0 5px 5px;
overflow: hidden;
}
.card_font {
color: #495366;
font-size: 12px;
margin: auto;
font-family: "Genshin";
}
.card_refinement {
position: absolute;
top: 1px;
left: 1px;
width: 13px;
height: 13px;
border-radius: 3px;
font-size: 12px;
line-height: 15px;
text-align: center;
}
.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 {
background-color: rgba(211, 127, 50, 0.8);
color: #FFD816;
}
.card_constellation {
position: absolute;
top: 1px;
right: 1px;
width: 13px;
height: 13px;
border-radius: 3px;
font-size: 12px;
line-height: 15px;
text-align: center;
background-color: rgba(67, 67, 67, 0.8);
color: #CCCCCC;
}
.card_icon {
position: absolute;
top: 1px;
left: 1px;
}
.card_set_container {
position:absolute;
top: 0px;
right: 0px;
width: 16px;
height: 16px;
border-radius: 0px 5px 0px 5px;
background-color: #e0e0e0;
}
.card_set_container > .icon {
position: absolute;
top: -6px;
right: 1px;
}
.card_stars {
position: absolute;
bottom: 16px;
height: 16px;
}
.card_stars.star_1 {
left: 29px;
width: 16px;
}
.card_stars.star_2 {
left: 24px;
width: 27.73px;
}
.card_stars.star_3 {
left: 17px;
width: 39.57px;
}
.card_stars.star_4 {
left: 12px;
width: 50.91px;
}
.card_stars.star_5 {
left: 6px;
width: 62.55px;
}
.element_anemo {
background: #49B8AD;
background: linear-gradient(180deg, #49B8AD 0%, #217468 100%);
}
.element_cryo {
background: #75D5F1;
background: linear-gradient(180deg, #75D5F1 0%, #20668F 100%);
}
.element_dendro {
background: #4FBD1D;
background: linear-gradient(180deg, #4FBD1D 0%, #5A771C 100%);
}
.element_electro {
background: #B36BD2;
background: linear-gradient(180deg, #B36BD2 0%, #652B85 100%);
}
.element_geo {
background: #C1A550;
background: linear-gradient(180deg, #C1A550 0%, #705523 100%);
}
.element_hydro {
background: #2E81BF;
background: linear-gradient(180deg, #2E81BF 0%, #1E4294 100%);
}
.element_none {
background: #929292;
background: linear-gradient(180deg, #929292 0%, #2A2A2A 100%);
}
.element_pyro {
background: #AB614B;
background: linear-gradient(180deg, #AB614B 0%, #501B23 100%);
}
.card_caption {
margin: 1px 3px 3px;
line-height: 1;
font-size: 12px;
word-break: break-word;
hyphens: auto;
}
.card_with_caption {
display: inline-block;
position: relative;
vertical-align: top;
width: min-content;
height: fit-content;
text-align: center;
}
.card_corner {
display: flex;
position: absolute;
right: 0px;
bottom: 0px;
}
.card_corner span {
display: flex;
}
/* Hide unknown images */
.card_image > a.new, .mini_card_image > a.new {
display: none;
}
.mini_card_container {
position: relative;
width: 48px;
height: 48px;
display: inline-block;
text-align: center;
}
.mini_card_image {
position: absolute;
top: 0;
width: 48px;
height: 48px;
border-radius: 5px
}
.mini_card_image img {
width: 48px;
height: 48px;
border-radius: 5px
}
.mini_card_text {
position: absolute;
bottom: 0;
width: 48px;
max-height: 2em;
font-size: 8px;
color: #FFFFFF;
background: #000000CC;
border-radius: 0 0 5px 5px;
word-wrap: break-word;
line-height: 8px;
user-select: none;
overflow: hidden;
transition: max-height 0.3s ease;
}
.mini_card_container:hover .mini_card_text {
max-height: 100%;
}
.mini_card_text a {
display: block;
width: 48px;
text-decoration: none;
color: #FFFFFF;
}
.mini_card_icon {
position: absolute;
display: flex;
top: 1px;
left: 1px;
}
.mini_card_icon a {
display: flex;
}
.mini_card_icon img {
width: 10px;
height: 10px;
}