.font-YS { font-family: Number, "汉仪文黑-65W", YS, PingFangSC-Medium, "PingFang SC", sans-serif; } .font-NZBZ { font-family: Number, "印品南征北战NZBZ体", NZBZ, "汉仪文黑-65W", YS, PingFangSC-Medium, "PingFang SC", sans-serif; } body { width: 820px; } .container { width: 820px; padding: 0; background-size: cover; overflow: hidden; } .group-rank-icon { width: 16px; height: 16px; background: url("./imgs/mark-icon.png"); background-size: auto 100%; display: inline-block; vertical-align: bottom; margin: -1px 3px -1px 0; } .group-rank-icon.mark-icon { background-position: 100% 0; } .char-list-item { height: 60px; background-size: auto 150%; display: flex; padding: 5px; overflow: visible; } .char-list-item .line { margin-left: 15px; position: relative; } .char-list-item .line:before { content: ""; display: block; width: 1px; height: 40px; background: rgba(255, 255, 255, 0.8); background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.1)); position: absolute; left: -15px; top: 5px; } .char-idx { width: 48px; } .char-idx .idx-icon { display: inline-block; width: 24px; height: 24px; margin: 13px 12px; background: url('./imgs/mark-icon.png'); background-size: auto 100%; text-align: center; font-size: 12px; line-height: 24px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8); } .char-idx .idx-icon.mode-mark.idx-1, .char-idx .idx-icon.mode-dmg.idx-1 { width: 48px; margin: 13px 0; background-image: url('./imgs/mark-icon2.png'); color: rgba(0, 0, 0, 0); text-shadow: none; } .char-idx .idx-icon.mode-mark, .char-idx .idx-icon.mode-crit, .char-idx .idx-icon.mode-valid { background-position: 100% 0; } .char-idx .char-icon { width: 36px; height: 36px; margin-top: 8px; border-radius: 10px; overflow: hidden; } .char-idx .char-icon .img { border-radius: 0; } .char-icon { width: 50px; height: 50px; border-radius: 50%; border: 1px solid #fff; box-shadow: 1px 1px 3px 0 #000; overflow: visible; margin: 0 5px 0 6px; } .char-icon .img { background-size: auto 100%; background-position: top center; overflow: hidden; border-radius: 50%; } .char-info .name { margin-top: 4px; height: 24px; line-height: 24px; font-size: 18px; color: #d3bc8e; font-weight: normal; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8); } .char-info .cons { height: 16px; line-height: 16px; font-size: 12px; width: 16px; text-align: center; padding: 0; margin-right: -2px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8); } .char-info .info { height: 20px; font-size: 12px; line-height: 20px; } .char-name { width: 100px; } .char-talent { display: flex; padding: 0 5px; margin: -5px 0; } .char-talent .talent-item, .char-talent .talent-icon { width: 56px; height: 56px; margin: 0 -3px; } .char-talent .talent-item { position: relative; } .char-talent .talent-icon { width: 56px; height: 56px; position: relative; margin: 7px -5px 13x; border-radius: 50%; background-size: contain; background-repeat: no-repeat; background-position: center center; z-index: 90; } .char-talent .talent-icon img, .char-talent .talent-icon .talent-icon-img { width: 46%; height: 46%; position: absolute; top: 50%; left: 50%; margin: -22% 0 0 -23%; background-size: contain; background-repeat: no-repeat; background-position: center; } .char-talent .talent-icon span { background: #fff; width: 22px; height: 18px; line-height: 18px; font-size: 12px; text-align: center; border-radius: 5px; position: absolute; bottom: -2px; left: 50%; margin-left: -11px; color: #000; box-shadow: 0 0 5px 0 #000; } .char-talent .talent-icon.talent-plus span { background: #2e353e; color: #ffdfa0; font-weight: bold; box-shadow: 0 0 1px 0 #d3bc8e, 1px 1px 2px 0 rgba(0, 0, 0, 0.5); } .char-talent .talent-icon.talent-crown:after { content: ""; display: block; width: 18px; height: 18px; background: url("../character/imgs/crown.png") no-repeat; background-size: contain; position: absolute; left: 50%; top: -2px; margin-left: -9px; } .char-talent .talent-icon.talent-crown-sr:after { content: ""; display: block; width: 22px; height: 22px; background: url("../character/imgs/crown-sr.webp") no-repeat; background-size: contain; position: absolute; left: 50%; top: -2px; margin-left: -9px; } .char-item { vertical-align: middle; height: 50px; } .char-item .item { position: relative; width: 36px; height: 36px; margin: 7px 5px 7px 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7); display: inline-block; overflow: visible; vertical-align: middle; } .char-weapon { width: 125px; display: flex; } .char-weapon .img { margin: -10px -5px; width: 46px; height: 56px; background-size: contain; background-position: center; background-repeat: no-repeat; } .char-weapon .weapon-info { padding-left: 5px; } .char-weapon .cons { width: 28px; font-size: 12px; transform: scale(0.9); transform-origin: 0 50%; } .char-weapon .name { height: 20px; line-height: 20px; } .char-weapon .name strong { font-size: 13px; font-weight: normal; } .char-artis { display: flex; width: 130px; } .char-artis { margin-left: 5px; text-align: left; position: relative; z-index: 10; } .char-artis.class-ACE .artis-mark-class, .char-artis.class-MAX .artis-mark-class { background: #ff5722; } .char-artis.class-SSS .artis-mark-class, .char-artis.class-SS .artis-mark-class { background: #531ba9cf; } .char-artis.class-S .artis-mark-class, .char-artis.class-A .artis-mark-class { background: #3955b7; } .char-artis.class-B .artis-mark-class, .char-artis.class-C .artis-mark-class, .char-artis.class-D .artis-mark-class { background: #aaa; } .char-artis .artis-mark-class { width: 28px; margin-right: -2px; transform: scale(0.9); transform-origin: 0 50%; } .char-artis .artis { position: relative; width: 36px; height: 36px; margin: 7px 5px 7px 0; display: inline-block; } .char-artis .artis.no-artis { background: #bbb; } .char-artis .no-artis { background: url(../common/item/artifact-icon.webp) center no-repeat; background-size: auto 88%; } .char-artis .char-info .name { height: 20px; line-height: 20px; } .char-artis .artis2 { position: relative; } .char-artis .artis2 .img { position: absolute; transform: scale(0.7); width: 100%; height: 100%; margin: 0; } .char-artis .artis2 .img:first-child { transform-origin: left top; } .char-artis .artis2 .img:last-child { transform-origin: right bottom; } .char-artis .artis-title { font-size: 12px; white-space: nowrap; } .char-artis .artis-mark { height: 23px; } .char-dmg { width: 120px; } .char-dmg .dmg-value { height: 28px; line-height: 28px; font-size: 18px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8); } .char-dmg .dmg-title { height: 16px; line-height: 16px; margin-top: 6px; font-size: 12px; color: #aaa; } /*# sourceMappingURL=rank-profile-list.css.map */