Template:彩虹社/charbox.css

.charbox {
	display:inline-block; position:relative; margin:8px 4px;
}
.charbox>a>div {
	display:inline-flex; position:relative; width:30px; height:30px; vertical-align:-10px; flex-direction:column; align-items:center;
}
.charbox>a>div~span {
	margin-left:4px;
}
.charbox div[data-cb] {
	width:30px; position:absolute; top:0; font-size:17.5px; overflow:hidden; white-space:nowrap; border-radius:15px; font-weight:bold; flex-shrink:0;
}
	.charbox div[data-cb=S] {background:#CFC5CF; color:#CFC5CF;}
	.charbox div[data-cb=R] {background:#FFBDC9; color:#FFBDC9;}
	.charbox div[data-cb=Y] {background:#FFD599; color:#FFD599;}
	.charbox div[data-cb=G] {background:#A1EBA6; color:#A1EBA6;}
	.charbox div[data-cb=B] {background:#9FDBEF; color:#9FDBEF;}
	.charbox div[data-cb=I] {background:#BCC5FF; color:#BCC5FF;}
	.charbox div[data-cb=V] {background:#FBBBF6; color:#FBBBF6;}

.charbox [data-cb]>div {
	display:inline-block; width:30px; height:30px; transform-origin:20px 16px; margin-right:15px; vertical-align:-8px; overflow:hidden;
}
.charbox [data-cb]>div:empty {
	background:url(https://img.moegirl.org.cn/common/9/94/Nav-nijisanji-v27.png) 0 0/390px silver;
}
.charbox [data-cb]>span {
	display:inline-block; position:relative; line-height:70px; padding-left:15px; margin:-30px 10px -30px -10px; text-shadow:white 1.4px 1.4px, white -1.4px 1.4px, white -1.4px -1.4px, white 1.4px -1.4px, white 2px 0, white -2px 0, white 0 2px, white 0 -2px; letter-spacing:.02em; user-select:none;
}
	.charbox [data-cb=S]>span {background:linear-gradient(to right,rgba(207,197,207,0),#CFC5CF 10px);}
	.charbox [data-cb=R]>span {background:linear-gradient(to right,rgba(255,189,201,0),#FFBDC9 10px);}
	.charbox [data-cb=Y]>span {background:linear-gradient(to right,rgba(255,213,153,0),#FFD599 10px);}
	.charbox [data-cb=G]>span {background:linear-gradient(to right,rgba(161,235,166,0),#A1EBA6 10px);}
	.charbox [data-cb=B]>span {background:linear-gradient(to right,rgba(159,219,239,0),#9FDBEF 10px);}
	.charbox [data-cb=I]>span {background:linear-gradient(to right,rgba(188,197,255,0),#BCC5FF 10px);}
	.charbox [data-cb=V]>span {background:linear-gradient(to right,rgba(251,187,246,0),#FBBBF6 10px);}

.charbox:not(.zh-off) span:nth-of-type(2), .charbox.zh-off span:nth-last-of-type(2) {
	display:none;
}

@media screen and (min-width:640px) {
	.charbox:hover {z-index:20;}
	.charbox:not(:hover):after {content:""; position:absolute; left:0; right:0; top:0; bottom:0;}
	.charbox:hover>a>div {top:-3px; left:calc(50% - 15px);}
	.charbox:hover div[data-cb] {top:-17px; border-radius:8px; border:white 3px solid; width:auto;}
	.charbox:hover [data-cb]>div {transform:scale(2.5); background-color:transparent !important; vertical-align:-21px; margin:13px 15px 13px 30px;}
	.charbox:hover, .charbox:hover div {transition:all .3s cubic-bezier(0.1,0.8,0.2,0.9), background-color 0s, margin-left 0s, border 0s;}
}

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