Template:少女前线图鉴/style.css

.gfindex{
	width:130px;
	display:inline-block;
	vertical-align: top;
	line-height:0;
    position: relative;
    margin-bottom:10px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}
.gf-poc{
	background-color:#FFFFFF;
	background-image:url('https://img.moegirl.org.cn/common/e/e8/GF-enemy-bg.png');
    background-size: 130px 200px;
    background-repeat:no-repeat;
}

.gf-enemy{
	background-color:#242424;
}

/* 图片裁剪样式 */
.gfimg {
    position: relative;
    overflow: hidden;
    display: inline-block;
    width:130px;
    height:200px;
}
.gfimg img {
    position: absolute;
}

.gfimg-em{
	width: 130px;
	height: 200px;
	overflow: hidden;
	display: flex;
	justify-content: center;
}

.gfimg-em img{
	height: 100% !important;
	width: auto !important;
	max-width:unset!important;
	/* 对于512x512图片，计算负边距 */
	margin-left: -35px;  /* 取中间 (200-130)/2 = 35px */
	margin-right: -35px;
}

.sprite{
	position: absolute; 
    top: 0; 
    left: 0; 
    width: 130px; 
    height: 25px; 
    background-image:url('https://img.moegirl.org.cn/common/d/dc/GFtype-sprite-3.png');
    background-size: 390px 300px;
    background-repeat: no-repeat;
}
.AR-2 {
    background-position: 0px 0px;
}

.AR-3 {
    background-position: -130px 0px;
}

.AR-4 {
    background-position: -260px 0px;
}

.AR-5 {
    background-position: 0px -25px;
}

.AR-6 {
    background-position: -130px -25px;
}

.AR-1 {
    background-position: -260px -25px;
}

.HG-2 {
    background-position: 0px -50px;
}

.HG-3 {
    background-position: -130px -50px;
}

.HG-4 {
    background-position: -260px -50px;
}

.HG-5 {
    background-position: 0px -75px;
}

.HG-6 {
    background-position: -130px -75px;
}

.HG-1 {
    background-position: -260px -75px;
}

.MG-2 {
    background-position: 0px -100px;
}

.MG-3 {
    background-position: -130px -100px;
}

.MG-4 {
    background-position: -260px -100px;
}

.MG-5 {
    background-position: 0px -125px;
}

.MG-6 {
    background-position: -130px -125px;
}

.MG-1 {
    background-position: -260px -125px;
}

.RF-2 {
    background-position: 0px -150px;
}

.RF-3 {
    background-position: -130px -150px;
}

.RF-4 {
    background-position: -260px -150px;
}

.RF-5 {
    background-position: 0px -175px;
}

.RF-6 {
    background-position: -130px -175px;
}

.RF-1 {
    background-position: -260px -175px;
}

.SG-2 {
    background-position: 0px -200px;
}

.SG-3 {
    background-position: -130px -200px;
}

.SG-4 {
    background-position: -260px -200px;
}

.SG-5 {
    background-position: 0px -225px;
}

.SG-6 {
    background-position: -130px -225px;
}

.SG-1 {
    background-position: -260px -225px;
}

.SMG-2 {
    background-position: 0px -250px;
}

.SMG-3 {
    background-position: -130px -250px;
}

.SMG-4 {
    background-position: -260px -250px;
}

.SMG-5 {
    background-position: 0px -275px;
}

.SMG-6 {
    background-position: -130px -275px;
}

.SMG-1 {
    background-position: -260px -275px;
}

.rare{
	width:100%;
	padding:5px 0;
	display:inline-block;
	vertical-align:top;
	line-height:14px;
	text-align:center;
}

.rare-1{
	background-color:#D4A2FC;
}

.rare-2{
	background-color:white;
}

.rare-3{
	background-color:#5CD8C2;
}

.rare-4{
	background-color:#D5E259;
}

.rare-5{
	background-color:#FCA708;
}

.rare-6{
	background-color:#FD4402;
}

.rare-em{
	background-color:#D61F1E;
	color:white;
}

.enemy-sprite{
	position: absolute; 
    top: 0; 
    left: 0; 
    width: 130px; 
    height: 25px; 
    background-image:url('https://img.moegirl.org.cn/common/e/e4/GFenemy-sprite.png');
    background-size: 260px 100px;
    background-repeat: no-repeat;
}

.other {
    background-position: 0px 0px;
}

.em-other {
    background-position: -130px 0px;
}

.military {
    background-position: 0px -25px;
}

.em-military {
    background-position: -130px -25px;
}

.paradise {
    background-position: 0px -50px;
}

.em-paradise {
    background-position: -130px -50px;
}

.sf {
    background-position: 0px -75px;
}

.em-sf {
    background-position: -130px -75px;
}