Template:突击莉莉人物信息卡/style.css

/**背景**/
.ALLB-ChInf {
	overflow: hidden;
	position: relative;
	max-width: 1000px;
	min-width: 680px;
	padding: calc(6% - 30px);
}
.ALLB-ChInf .bgi {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	opacity: 0.4;
	background: center/cover no-repeat;
}
.ALLB-ChInf .bgi.百合丘 {
	background-image: url('https://img.moegirl.org.cn/common/2/28/Allb_%E8%83%8C%E6%99%AF_%E7%99%BE%E5%90%88%E4%B8%98%E5%A5%B3%E5%AD%90%E5%AD%A6%E9%99%A2.jpg');
}
.ALLB-ChInf .bgi.神庭 {
	background-image: url('https://img.moegirl.org.cn/common/e/e6/Allb_%E8%83%8C%E6%99%AF_%E7%A5%9E%E5%BA%AD%E5%A5%B3%E5%AD%90%E8%89%BA%E6%9C%AF%E9%AB%98%E6%A0%A1.png');
}
.ALLB-ChInf .bgi.艾伦斯格 {
	background-image: url('https://img.moegirl.org.cn/common/e/e4/Allb_%E8%83%8C%E6%99%AF_%E8%89%BE%E4%BC%A6%E6%96%AF%E6%A0%BC%E5%A5%B3%E5%AD%A6%E5%9B%AD.jpg');
}
.ALLB-ChInf .bg1 {
	position: relative;
	padding: 15px;
	background: linear-gradient(to bottom right,rgba(255,255,255,0.747),transparent 50%);
}
.ALLB-ChInf .bg2 {
	padding:25px;
	background:linear-gradient(to bottom right,white,transparent 50%);
	border:2px solid rgba(255,255,255,0.747);
	display: flex;
}

/**立绘**/
.ALLB-ChInf .pic {
	position: relative;
	min-height: 400px;
	flex: 0 1 346px;
	overflow: hidden;
	margin-left: 10px;
}
.ALLB-ChInf .pic img {
	position: absolute;
	left: calc(50% - 250px);
	top: -80px;
	max-width: none !important;
}

/**内容**/
.ALLB-ChInf .text {
	width: 1px; /*这个有用*/
	flex: 1 2 490px;
	margin-top: 10px;
}
/*header*/
.ALLB-ChInf .head {
	display: flex;
}
.ALLB-ChInf .icon {
	position: relative;
	width: 88px;
	height: 88px;
	-webkit-user-select: none;
	user-select: none;
	z-index: 2;
}
.ALLB-ChInf .icon img {
	position: relative;
	top: -26px;
	left: -26px;
}
.ALLB-ChInf .id {
	color:rgb(65,67,79);
	flex: 1;
	z-index: 3;
}
.ALLB-ChInf .name {
	border-bottom:2px solid rgb(92,94,123);
	font-size:27px;
	line-height: 1.2;
	margin-bottom: 5px;
}
.ALLB-ChInf .data {
	display: flex;
	justify-content: space-between;
	flex-flow: row wrap;
	white-space: nowrap;
	column-gap: 1.5em;
}
/*信息*/
.ALLB-ChInf dl {
	margin: 20px 0 0;
	line-height: 27px;
	z-index: 3;
}
.ALLB-ChInf dl>div {
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
	margin: 3px 0;
}
.ALLB-ChInf dt {
	color: #FFF;
	flex:0 100px;
	margin:0;
	background:linear-gradient(to right,rgba(136,141,163,0.842),rgba(166,174,199,0.788));
	padding:0 10px;
	font-weight:bold;
}
.ALLB-ChInf dd {
	margin:0 0 0 12px;
	border-bottom:1px dashed rgb(92,94,123);
	flex: 1 18em;
}
/*浏览器宽度过窄时隐藏图片、调整宽度*/
@media screen and (max-width: 936px) {
	.ALLB-ChInf { min-width: 330px;}
	.ALLB-ChInf .pic { display: none; }
}
/* [[Category:在模板名字空间下的CSS页面]] */