Template:阳炎Project/styles.css

/* general */
.kgpr-link {
	/* A */
	display: inline-block;
	position: relative;
	margin: 1px 6px;
	text-align: center;
	line-height: 24px;
}
.kgpr-link > a > div {
	/* A-A */
	display: inline-block;
	position: relative;
	height: 24px;
	background: rgba(139,139,139,.1);
	color: #38F;
	font-weight: normal;
	vertical-align: bottom;
	overflow: hidden;
	user-select: none;
}
.kgpr-link table {
	/* A-A' */
	display: table;
	margin: 0;
	border-collapse: collapse;
}
.kgpr-link > a[href] > div > div:first-child, .kgpr-link > a[href] tr:first-child > td {
	/* A-A-AB */
	color: #222;
}
.kgpr-link div > div, .kgpr-link td:first-child {
	/* A-A-AC */
	padding: 0 8px;
}
.kgpr-link > a[href] tr:first-child > td:last-child {
	/* A-A-B */
	position: relative;
	left: -5px;
	text-align: right;
	text-align-last: justify;
}
.kgpr-link > a[href] > div > div:first-child:after, .kgpr-link > a[href] tr:first-child:after {
	/* A-A-mask */
	content: "";
	position: absolute;
	top: -25px;
	bottom: -25px;
	left: 0;
	right: 0;
	border-radius: 50%;
	background: #FFF;
	transform: scale(0);
	transition: transform .2s ease-out, background .2s ease-out .3s;
}
.kgpr-link div > div:last-child, .kgpr-link tr:last-child > td {
	/* A-A-CD */
	position: relative;
	top: -24px;
	opacity: 0;
	transition: opacity .2s ease-out, color .2s ease-out .3s;
}
.kgpr-link tr:last-child > td:last-child > span {
	/* A-A-D-A */
	position: absolute;
	width: 100%;
	left: 300%;
	background: #38F;
	color: #FFF;
	overflow: hidden;
	transition: left .4s ease-out;
}
.kgpr-link tr:last-child > td:last-child > span > span {
	/* A-A-D-A-A */
	position: relative;
	left: -300%;
	transition: left .4s ease-out;
}
.kgpr-link > a + div {
	/* A-frame */
	position: absolute;
	top: -15px;
	bottom: -15px;
	left: -15px;
	right: -15px;
	box-sizing: border-box;
	border: 1px solid #38F;
	opacity: 0;
	transition: all .5s cubic-bezier(0, 0, 0, 1), opacity .2s ease-out, border-color .2s ease-out .3s;
}
/* hover & selflink & new */
.kgpr-link:hover :after { transform: scale(2) !important; }
.kgpr-link > .mw-selflink > div { background: #FFF; }
.kgpr-link:hover > a[href] > div > div:last-child, .kgpr-link:hover > a[href] tr:last-child > td, .kgpr-link > .mw-selflink tr:last-child > td:last-child { opacity: 1; }
.kgpr-link:hover tr:last-child > td:last-child span, .kgpr-link > .mw-selflink tr:last-child > td:last-child span { left: 0; }
.kgpr-link:hover > a + div, .kgpr-link > .mw-selflink + div { top: 0; bottom: 0; left: 0; right: 0; opacity: 1; }
.kgpr-link > .new > div { color: #999; }
/* individual */
.kgpr-link tr:after { left: 30% !important; right: -30% !important; }
.kgpr-link div > div:last-child { font-weight: bold; }
.kgpr-link#朝比奈日和 :after, .kgpr-link#朝比奈日和 > .mw-selflink > div { background:#F9C; }
.kgpr-link#楯山研次朗 :after, .kgpr-link#楯山研次朗 > .mw-selflink > div { background:#C30; }
.kgpr-link#楯山彩花 :after, .kgpr-link#楯山彩花 > .mw-selflink > div { background:#F99; }
.kgpr-link#蓟 :after, .kgpr-link#蓟 > .mw-selflink > div { background:#300; }
.kgpr-link#槻彦 :after, .kgpr-link#槻彦 > .mw-selflink > div { background:#F66; }
.kgpr-link#小樱紫苑 :after, .kgpr-link#小樱紫苑 > .mw-selflink > div { background:#F69; }
.kgpr-link#黑Konoha :after, .kgpr-link#界外科学:hover :after, .kgpr-link#黑Konoha > .mw-selflink > div, .kgpr-link#界外科学 > .mw-selflink > div { background:#000; }
.kgpr-link#界外科学:hover > a + div, .kgpr-link#界外科学 > .mw-selflink + div { border-color: #FC3; }
.kgpr-link#界外科学:hover div > div:last-child, .kgpr-link#界外科学 > .mw-selflink > div { color: #FFF; }
/* [[Category:在模板命名空间下的CSS页面]] */