Genshin Impact Wiki
Register
Advertisement
Genshin Impact Wiki

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;
}
Advertisement