.card { padding-top: 0.8em; overflow: hidden; position: relative; } .card .uid { font-size: 0.6em; text-align: center; position: absolute; border-image-source: url("./images/CurseBG08.png"); border-image-slice: 30 60 30 60 fill; border-image-width: 0.5em 1em 0.5em 1em; border-image-outset: 0em 0em 0em 0em; border-image-repeat: stretch stretch; padding: 0.5em 1.2em; font-size: 1em; top: 0.5em; left: 0.5em; color: rgb(255, 255, 255); stroke: 0.05em rgba(0, 0, 0, 0.6); -webkit-text-stroke: 0.05em rgba(0, 0, 0, 0.6); z-index: 1; } .card .star { width: 5.5em; height: 1.5em; } .card .star.star0 { background-size: cover; background-repeat: no-repeat; background-position: center; background-image: url("./images/star/0.png"); } .card .star.star1 { background-size: cover; background-repeat: no-repeat; background-position: center; background-image: url("./images/star/1.png"); } .card .star.star2 { background-size: cover; background-repeat: no-repeat; background-position: center; background-image: url("./images/star/2.png"); } .card .star.star3 { background-size: cover; background-repeat: no-repeat; background-position: center; background-image: url("./images/star/3.png"); } .card .star.star4 { background-size: cover; background-repeat: no-repeat; background-position: center; background-image: url("./images/star/4.png"); } .card .star.star5 { background-size: cover; background-repeat: no-repeat; background-position: center; background-image: url("./images/star/5.png"); } .card .basic { display: flex; align-items: stretch; overflow: hidden; } .card .basic .char { width: 55%; position: relative; flex-grow: 1; } .card .basic .char .avatar { height: 100%; padding-top: 1em; overflow: hidden; } .card .basic .char .avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top center; position: absolute; } .card .basic .char .skills { position: absolute; width: 120%; height: 3.5em; background: url("./images/skill_bg.png"); background-size: contain; background-repeat: no-repeat; background-position: center; bottom: 3em; right: -1.6em; display: flex; align-items: flex-end; padding-left: 2.5em; padding-bottom: 0.2em; } .card .basic .char .skills .skill { width: 1.4em; aspect-ratio: 1; margin-right: 1.38em; display: flex; justify-content: center; align-items: center; } .card .basic .info { width: 45%; flex-grow: 0; flex-shrink: 0; font-size: 1.2em; position: relative; z-index: 2; } .card .basic .info .char_info { width: 140%; position: relative; right: 20%; padding: 0.3em 0.2em; padding-right: 20%; padding-left: 8%; border-image-slice: 0 30 0 40 fill; border-image-width: 0em 1.5em 0em 2em; border-image-outset: 0 0 0 0; border-image-repeat: stretch stretch; border-image-source: url("./images/CurseBG04.png"); filter: drop-shadow(0 0 0.1em rgb(0, 0, 0)); } .card .basic .info .char_info .base { display: flex; align-items: center; gap: 0.2em; overflow: hidden; } .card .basic .info .char_info .base .rank { width: 1.2em; flex-grow: 0; flex-shrink: 0; } .card .basic .info .char_info .base .property { width: 1em; flex-grow: 0; flex-shrink: 0; } .card .basic .info .char_info .base .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card .basic .info .char_info .addition { display: flex; align-items: center; font-size: 0.7em; gap: 0.2em; padding-left: 1em; } .card .basic .info .char_info .addition .level { background-color: #000; padding: 0em 0.7em; border-radius: 1em; } .card .basic .info .char_info .addition .role_ranks { display: flex; gap: 0.1em; } .card .basic .info .char_info .addition .role_ranks span { width: 1.2em; aspect-ratio: 1; border-radius: 1em; background-size: contain; background-repeat: no-repeat; background-position: center; opacity: 0.4; } .card .basic .info .char_info .addition .role_ranks span:nth-child(1) { background-image: url("./images/ranks/1.png"); } .card .basic .info .char_info .addition .role_ranks.r1 span:nth-child(1) { opacity: 1 !important; } .card .basic .info .char_info .addition .role_ranks span:nth-child(2) { background-image: url("./images/ranks/2.png"); } .card .basic .info .char_info .addition .role_ranks.r2 span:nth-child(1) { opacity: 1 !important; } .card .basic .info .char_info .addition .role_ranks.r2 span:nth-child(2) { opacity: 1 !important; } .card .basic .info .char_info .addition .role_ranks span:nth-child(3) { background-image: url("./images/ranks/3.png"); } .card .basic .info .char_info .addition .role_ranks.r3 span:nth-child(1) { opacity: 1 !important; } .card .basic .info .char_info .addition .role_ranks.r3 span:nth-child(2) { opacity: 1 !important; } .card .basic .info .char_info .addition .role_ranks.r3 span:nth-child(3) { opacity: 1 !important; } .card .basic .info .char_info .addition .role_ranks span:nth-child(4) { background-image: url("./images/ranks/4.png"); } .card .basic .info .char_info .addition .role_ranks.r4 span:nth-child(1) { opacity: 1 !important; } .card .basic .info .char_info .addition .role_ranks.r4 span:nth-child(2) { opacity: 1 !important; } .card .basic .info .char_info .addition .role_ranks.r4 span:nth-child(3) { opacity: 1 !important; } .card .basic .info .char_info .addition .role_ranks.r4 span:nth-child(4) { opacity: 1 !important; } .card .basic .info .char_info .addition .role_ranks span:nth-child(5) { background-image: url("./images/ranks/5.png"); } .card .basic .info .char_info .addition .role_ranks.r5 span:nth-child(1) { opacity: 1 !important; } .card .basic .info .char_info .addition .role_ranks.r5 span:nth-child(2) { opacity: 1 !important; } .card .basic .info .char_info .addition .role_ranks.r5 span:nth-child(3) { opacity: 1 !important; } .card .basic .info .char_info .addition .role_ranks.r5 span:nth-child(4) { opacity: 1 !important; } .card .basic .info .char_info .addition .role_ranks.r5 span:nth-child(5) { opacity: 1 !important; } .card .basic .info .char_info .addition .role_ranks span:nth-child(6) { background-image: url("./images/ranks/6.png"); } .card .basic .info .char_info .addition .role_ranks.r6 span:nth-child(1) { opacity: 1 !important; } .card .basic .info .char_info .addition .role_ranks.r6 span:nth-child(2) { opacity: 1 !important; } .card .basic .info .char_info .addition .role_ranks.r6 span:nth-child(3) { opacity: 1 !important; } .card .basic .info .char_info .addition .role_ranks.r6 span:nth-child(4) { opacity: 1 !important; } .card .basic .info .char_info .addition .role_ranks.r6 span:nth-child(5) { opacity: 1 !important; } .card .basic .info .char_info .addition .role_ranks.r6 span:nth-child(6) { opacity: 1 !important; } .card .basic .info .char_info .addition .role_ranks span:nth-child(7) { background-image: url("./images/ranks/7.png"); } .card .basic .info .char_info .addition .role_ranks.r7 span:nth-child(1) { opacity: 1 !important; } .card .basic .info .char_info .addition .role_ranks.r7 span:nth-child(2) { opacity: 1 !important; } .card .basic .info .char_info .addition .role_ranks.r7 span:nth-child(3) { opacity: 1 !important; } .card .basic .info .char_info .addition .role_ranks.r7 span:nth-child(4) { opacity: 1 !important; } .card .basic .info .char_info .addition .role_ranks.r7 span:nth-child(5) { opacity: 1 !important; } .card .basic .info .char_info .addition .role_ranks.r7 span:nth-child(6) { opacity: 1 !important; } .card .basic .info .char_info .addition .role_ranks.r7 span:nth-child(7) { opacity: 1 !important; } .card .basic .info .property_info { background-color: rgb(47, 47, 47); border-left: 0.1em solid rgb(0, 0, 0); padding-top: 0.2em; background: url("./images/BgFrame01.png") center/150% no-repeat; } .card .basic .info .property_info .title { font-size: 0.6em; } .card .basic .info .property_info .title .special-title { margin-bottom: 0; padding-bottom: 0; } .card .basic .info .property_info .list { display: flex; flex-direction: column; gap: 0.2em; padding-bottom: 0.2em; } .card .basic .info .property_info .list .properties { display: flex; align-items: center; gap: 0.4em; padding: 0.05em 1em 0em 0.05em; } .card .basic .info .property_info .list .properties:nth-child(odd) { background-color: rgba(221, 224, 221, 0.25); } .card .basic .info .property_info .list .properties .prop-icon { width: 1em; flex-grow: 0; flex-shrink: 0; margin: 0 0.4em; } .card .basic .info .property_info .list .properties .label { flex-grow: 1; flex-shrink: 1; font-size: 0.65em; color: rgb(166, 166, 166); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card .basic .info .property_info .list .properties .label.yellow { color: rgb(247, 199, 54); } .card .basic .info .property_info .list .properties .label.blue { color: rgb(65, 147, 237); } .card .basic .info .property_info .list .properties .label.white { color: rgb(233, 233, 233); } .card .basic .info .property_info .list .properties .value { flex-grow: 0; flex-shrink: 0; font-size: 0.8em; } .card .basic .info .weapon_info { border-image-slice: 118 0 68 43 fill; border-image-width: 4.5em 0em 2.7em 1.7em; border-image-outset: 0em 0em 0em 0em; border-image-repeat: stretch stretch; border-image-source: url("./images/weapon_bg.png"); margin-top: -0.8em; width: 115%; margin-left: -15%; font-size: 0.8em; padding: 2em 1.2em; padding-bottom: 3em; position: relative; overflow: hidden; } .card .basic .info .weapon_info .info { width: 100%; position: relative; z-index: 2; } .card .basic .info .weapon_info .info .base { width: 100%; display: flex; align-items: center; gap: 0.5em; } .card .basic .info .weapon_info .info .base .rarity-icon { width: 2em; } .card .basic .info .weapon_info .info .base .name { text-shadow: 0 0 0.2em rgb(0, 0, 0); } .card .basic .info .weapon_info .info .main { display: flex; flex-direction: column; justify-content: stretch; width: max-content; } .card .basic .info .weapon_info .info .main .addition { font-size: 0.8em; display: flex; align-items: center; gap: 0.4em; } .card .basic .info .weapon_info .info .main .addition .level { -webkit-clip-path: polygon(0.2em 0%, calc(100% - 0.2em) 0%, 100% 0.2em, 100% calc(100% - 0.2em), calc(100% - 0.2em) 100%, 0.2em 100%, 0% calc(100% - 0.2em), 0% 0.2em); clip-path: polygon(0.2em 0%, calc(100% - 0.2em) 0%, 100% 0.2em, 100% calc(100% - 0.2em), calc(100% - 0.2em) 100%, 0.2em 100%, 0% calc(100% - 0.2em), 0% 0.2em); padding: 0 0.4em; font-size: 0.9em; display: flex; justify-content: center; align-items: center; color: rgb(43, 38, 40); margin: 0.1em 0; background-color: rgb(243, 203, 69); } .card .basic .info .weapon_info .info .main .properties { display: flex; align-items: center; background-color: rgb(65, 147, 237); gap: 0.2em; padding: 0 0.5em; border-radius: 1em; margin: 0.2em 0; } .card .basic .info .weapon_info .info .main .properties.sub { background-color: rgb(0, 0, 0); } .card .basic .info .weapon_info .info .main .properties .prop-icon { width: 1em; flex-grow: 0; flex-shrink: 0; } .card .basic .info .weapon_info .info .main .properties .label { flex-grow: 1; flex-shrink: 1; font-size: 0.7em; color: rgb(222, 222, 222); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card .basic .info .weapon_info .icon { position: absolute; top: 1.2em; right: 0; z-index: 1; height: 70%; margin-right: -1em; } .card .basic .info .weapon_info .icon img { height: 100%; } .card .other { border-image-source: url("./images/BgFrame01.png"); border-image-slice: 200 100 70 280 fill; border-image-width: 2em 1em 0.7em 2.8em; border-image-outset: 2em 1em 0.7em 2.8em; border-image-repeat: stretch stretch; padding-bottom: 3.3em; margin-top: -1.4em; position: relative; z-index: 5; } .card .c .comment, .card .C .comment { background: linear-gradient(0deg, rgba(39, 211, 30, 0.3), rgb(39, 211, 30)); -webkit-background-clip: text; background-clip: text; color: transparent; } .card .b .comment, .card .B .comment { background: linear-gradient(0deg, rgba(94, 189, 249, 0.3), rgb(94, 189, 249)); -webkit-background-clip: text; background-clip: text; color: transparent; } .card .a .comment, .card .A .comment { background: linear-gradient(0deg, rgba(210, 86, 255, 0.3), rgb(210, 86, 255)); -webkit-background-clip: text; background-clip: text; color: transparent; } .card .s .comment, .card .S .comment { background: linear-gradient(0deg, rgba(255, 218, 190, 0.3), rgb(255, 218, 190)); -webkit-background-clip: text; background-clip: text; color: transparent; } .card .ss .comment, .card .SS .comment { background: linear-gradient(0deg, rgba(255, 225, 116, 0.4), rgb(255, 225, 116)); -webkit-background-clip: text; background-clip: text; color: transparent; } .card .sss .comment, .card .SSS .comment { background: linear-gradient(0deg, rgba(255, 163, 59, 0.4), rgb(255, 163, 59)); -webkit-background-clip: text; background-clip: text; color: transparent; } .card .ace .comment, .card .ACE .comment { background: linear-gradient(0deg, rgba(255, 59, 59, 0.4), rgb(255, 59, 59)); -webkit-background-clip: text; background-clip: text; color: transparent; } .card .equip-stats { display: flex; padding: 0 1.8em; height: 6em; } .card .equip-stats .equip-score { border: #707070 solid; border-width: 0.2em 0 0.2em 0.2em; border-radius: 0.6em 0 0 0.6em; display: flex; justify-content: center; font-size: 1em; align-items: center; width: 30%; } .card .equip-stats .equip-score .comment-box { font-size: 1.2em; width: 2em; display: flex; justify-content: center; align-items: center; aspect-ratio: 1; border-radius: 50%; background-color: rgba(32, 32, 32, 0.4); box-shadow: 0 0 1em rgba(0, 0, 0, 0.4); border: 0.2em solid rgb(216, 216, 216); position: relative; z-index: 1; } .card .equip-stats .equip-score .value { border: 0.1em solid rgb(155, 155, 155); border-left: none; padding: 0.1em 1em 0.1em 1em; margin-left: -0.6em; border-radius: 0 1em 1em 0; } .card .equip-stats .equip-score .value .subt { font-size: 0.8em; } .card .equip-stats .property-stats { width: 70%; height: 100%; display: flex; flex-direction: column; flex-wrap: wrap; font-size: 0.8em; align-items: center; border: #707070 solid; border-width: 0.2em; border-radius: 0 0.6em 0.6em 0; overflow: hidden; } .card .equip-stats .property-stats .stat-item { width: 33.33%; height: 33.33%; padding: 0 0.2em; position: relative; display: flex; align-items: center; white-space: nowrap; color: #eee; border: #707070 0.1em solid; } .card .equip-stats .property-stats .stat-item:nth-child(7) { border-radius: 0 0.4em 0 0; } .card .equip-stats .property-stats .stat-item:nth-child(9) { border-radius: 0 0 0.4em 0; } .card .equip-stats .property-stats .stat-item.great { color: rgb(249, 189, 64); } .card .equip-stats .property-stats .stat-item.good { color: rgb(238, 207, 139); } .card .equip-stats .property-stats .stat-item.useless { color: #999999; } .card .equip-stats .property-stats .stat-item span.title { padding-left: 0.1em; text-align: left; width: 48%; } .card .equip-stats .property-stats .stat-item span.title span.count { display: inline-block; text-align: center; background-color: black; width: 1.6em; height: 1.6em; border: #696969 0.15em solid; border-radius: 0.4em; } .card .equip-stats .property-stats .stat-item span.value { padding-right: 0.2em; width: 52%; overflow: hidden; text-align: right; } .card .equip-list { width: 100%; display: grid; gap: 1em; grid-template-columns: repeat(auto-fill, minmax(30%, 1fr)); padding: 0 1.8em; align-items: stretch; margin-top: 1em; overflow: hidden; } .card .equip-list .box { border-image-source: url("./images/equip_bg.png"); border-image-slice: 190 90 110 170 fill; border-image-width: 5.7em 2.7em 3.3em 5.1em; border-image-outset: 1.8em 1.5em 1.8em 1.5em; border-image-repeat: stretch stretch; position: relative; margin-top: 1.3em; padding-bottom: 1em; min-height: 10em; } .card .equip-list .box.empty::after { content: ""; position: absolute; width: 2.5em; height: 2.5em; top: 50%; left: 50%; transform: translate(-50%, -50%); background-image: url("./images/empty_equip_07.png"); background-size: contain; background-repeat: no-repeat; background-position: center; } .card .equip-list .box:nth-child(1)::before { content: "01"; position: absolute; font-size: 2em; left: 50%; top: -0.85em; transform: translate(-50%, 0); z-index: -1; } .card .equip-list .box:nth-child(2)::before { content: "02"; position: absolute; font-size: 2em; left: 50%; top: -0.85em; transform: translate(-50%, 0); z-index: -1; } .card .equip-list .box:nth-child(3)::before { content: "03"; position: absolute; font-size: 2em; left: 50%; top: -0.85em; transform: translate(-50%, 0); z-index: -1; } .card .equip-list .box:nth-child(4)::before { content: "04"; position: absolute; font-size: 2em; left: 50%; top: -0.85em; transform: translate(-50%, 0); z-index: -1; } .card .equip-list .box:nth-child(5)::before { content: "05"; position: absolute; font-size: 2em; left: 50%; top: -0.85em; transform: translate(-50%, 0); z-index: -1; } .card .equip-list .box:nth-child(6)::before { content: "06"; position: absolute; font-size: 2em; left: 50%; top: -0.85em; transform: translate(-50%, 0); z-index: -1; } .card .equip-list .box .icon { width: 2.7em; aspect-ratio: 1; position: relative; left: -0.9em; top: -1.2em; background-color: rgb(0, 0, 0); background-image: url("./images/empty_equip_03.png"); background-size: contain; background-repeat: no-repeat; background-position: center; border-radius: 50%; } .card .equip-list .box .icon img { width: 100%; height: 100%; object-fit: contain; display: block; } .card .equip-list .box .info { display: flex; padding-left: 2.2em; margin-top: -2.5em; gap: 0.5em; align-items: center; } .card .equip-list .box .info .level { flex-grow: 1; flex-shrink: 1; text-align: center; font-size: 0.76em; background-color: #000; padding: 0.1em 0.5em; border-radius: 1em; margin-bottom: 0.3em; } .card .equip-list .box .info .rarity-icon { width: 2.2em; } .card .equip-list .box .name { padding: 0 0.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; } .card .equip-list .box .score { display: flex; justify-content: center; gap: 0.2em; font-size: 0.9em; align-items: flex-end; } .card .equip-list .box .score .value { font-size: 0.9em; background: linear-gradient(0deg, rgba(255, 255, 255, 0.1), rgb(255, 255, 255)); -webkit-background-clip: text; background-clip: text; color: transparent; } .card .equip-list .box .property-list { padding: 0 0.5em; overflow: hidden; } .card .equip-list .box .property-list .properties { display: flex; align-items: center; background-color: rgb(0, 0, 0); gap: 0.2em; padding: 0 0.5em; border-radius: 1em; margin: 0.2em 0; } .card .equip-list .box .property-list .properties .prop-icon { width: 1em; flex-grow: 0; flex-shrink: 0; } .card .equip-list .box .property-list .properties .count { display: flex; align-items: center; gap: 0.1em; flex-grow: 0; flex-shrink: 0; } .card .equip-list .box .property-list .properties .count span { width: 0.3em; aspect-ratio: 1; border-right: 0.1em solid rgb(255, 255, 255); border-top: 0.1em solid rgb(255, 255, 255); transform: rotate(45deg); margin-left: -0.15em; } .card .equip-list .box .property-list .properties .label { flex-grow: 1; flex-shrink: 1; font-size: 0.7em; color: rgb(222, 222, 222); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 1; } .card .equip-list .box .property-list .properties .label.hit0 { opacity: 0.6; } .card .equip-list .box .property-list .properties .label.hit25 { opacity: 0.8; } .card .equip-list .box .property-list .properties .label.hit50 { opacity: 1; } .card .equip-list .box .property-list .properties .label.hit75 { opacity: 1; color: rgb(238, 207, 139); } .card .equip-list .box .property-list .properties .label.hit100 { opacity: 1; color: rgb(249, 189, 64); } .card .equip-list .box .property-list .properties .value { color: rgb(249, 189, 64); font-size: 0.7em; margin-left: auto; } .card .equip-list .box .property-list .properties.main { background-color: rgb(65, 147, 237); } .card .equip-list .box .property-list .properties.main .prop-icon { width: 1.2em; margin-bottom: 0.2em; filter: drop-shadow(0 0 0.4em rgba(0, 0, 0, 0.3)); } .card .equip-list .box .property-list .properties.main .label { color: rgb(255, 255, 255); text-shadow: 0 0 0.4em rgba(0, 0, 0, 0.3); font-size: 0.8em; opacity: 1; } .card .equip-list .box .property-list .properties.main .value { color: rgb(255, 255, 255); text-shadow: 0 0 0.4em rgba(0, 0, 0, 0.3); font-size: 1em; } .card .damage-title { padding-top: 1.2em; } .card .damagelist { margin: 0 2em; margin-top: 1em; text-align: center; display: grid; backdrop-filter: blur(0.2em); border-radius: 0.5em; overflow: hidden; box-shadow: 0 0 3em rgba(0, 0, 0, 0.6); border: 0.1em solid rgba(255, 255, 255, 0.2); } .card .damagelist .dmg-tr { display: grid; grid-template-columns: 1.5fr 1fr 1fr; border-bottom: 0.1em solid rgba(255, 255, 255, 0.2); } .card .damagelist .dmg-tr:first-child { border-top: 0.2em solid rgba(255, 255, 255, 0.2); border-bottom: 0.2em solid rgba(255, 255, 255, 0.2); font-size: 1.1em; background: rgba(0, 0, 0, 0.2); text-shadow: 0 0 0.2em rgba(0, 0, 0, 0.6); color: rgb(206, 190, 149); } .card .damagelist .dmg-tr:first-child .dmg-td { text-align: center !important; background: none !important; } .card .damagelist .dmg-td { padding: 0.5em 0.5em; font-size: 0.9em; border-right: 0.1em solid rgba(255, 255, 255, 0.2); } .card .damagelist .dmg-td:first-child { text-align: left; background: rgba(0, 0, 0, 0.2); color: rgb(206, 190, 149); } .card .damagelist .dmg-td:last-child { border-right: none; } .copyright { margin-top: -3.3em; position: relative; z-index: 5; } /*# sourceMappingURL=card.css.map */