碧蓝航线/styles.css

/* Only for [[碧蓝航线]] */
/*目录*/
.toc,.mw-warning,.toccolours {
        border: 0.2em solid #6D9EF0;
        border-radius:0.4em;
    }

/*阵营*/
.camp{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content:center;
}
/*碧蓝航线与赤色中轴与其他阵营盒子*/
.camp .campRA,.camp .campAZ,.camp .campOT{
	max-width: 500px;
	margin-left:10px;
}
/*碧蓝航线阵营名*/
.campAZ .title{
	border-bottom: 2px solid #027df7;
}
/*赤色中轴阵营名*/
.campRA .title{
	border-bottom: 2px solid #8b0000;
}
/*其他阵营名*/
.campOT .title{
	border-bottom: 2px solid #9ecdd9;
}
/*阵营名共有样式*/
.camp .title{
	width: 100%;
	display: flex;
	overflow: hidden;
	font-size:20px;
	position: relative;
	font-weight:600;
	z-index:1;
	padding:0;
}
/*碧蓝航线简中*/
.campAZ .title>div{
	background-color: #027df7;
}
/*赤色中轴简中*/
.campRA .title>div{
	background-color: #8b0000;
}
/*其他阵营简中*/
.campOT .title>div{
	background-color: #9ecdd9;
}
/*简中共有样式*/
.camp .title>div{
	border-radius: 10px 10px 0 0;
	padding: 2px 5px;
	color: #fff;
}
/*其他语言*/
.camp .title>div>div{
	position: absolute;
	width: 400px;
	top: 12px;
	left: -400px;
	color: #000;
	transition: 0.3s linear;
	font-size: 14px;
	font-weight:400;
	z-index:-1;
}
/*动画效果*/
.camp .title:hover>div>div{
	left: 100px;
}
/*东煌适配*/
.campAZ:nth-child(3) .title:hover>div>div{
	left: 65px;
}
/*宽屏适配*/
@media(min-width:1200px){
	.camp{
		justify-content:flex-start;
	}
}
/*获奖记录*/
.timeline{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
}
.timeline li{
    padding: 0;
    margin: 0;
}
.timeline .date{
    border-left: 2px solid black;
    position: relative;
    width: 70%;
    border-left-color:#0146E2;
}
.timeline .content{
    background-color: rgba(255,255,255,0.8);
    margin: 10px auto 10px 30px;
    border-radius:5px;
    padding:5px 10px;
}
.timeline .line{
    display: block;
    height: 0;
    border-bottom: 2px solid black;
    width: 30px;
    position: absolute;
    top: 50%;
    transform:translate(0,-1px);
    z-index: 1;
    border-bottom-color:#0146E2;
}
.timeline .o1{
    display: block;
    background-color: rgb(255,255,255);
    border: 2px solid black;
    border-radius: 100px;
    border-color:#0146E2;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    transform: translate(-12px,-12px);
    z-index: 2;
}
.timeline .o2{
    display: block;
    background-color: #0146E2;
    border-radius: 100px;
    height: 16px;
    width: 16px;
    position: absolute;
    top: 50%;
    transform: translate(-8px,-8px);
    z-index: 3;
}
.timeline .time{
    display: block;
    position: absolute;
    left: -100px;
    top: 50%;
    transform: translate(0,-8px);
}
@media screen and (max-width:768px){
    .timeline .time{  
        left: 40px;
        font-size:12px;
        top: 0;
    }
}
.timeline .year{
    width:70%;
    display: flex;
    justify-content: flex-start;
}
.timeline .year1{
    background-color: #6D9EF0;
    color:#fff;
    border-radius:5px;
    transform: translateX(-32px);
    text-align: center;
    padding: 3px 10px;
}

/*[[Category:在主名字空间下的CSS页面]] */