Difference between revisions of "Template:Nijisanji/styles.css"

Latest revision as of 20:57, 30 April 2022

/* Toggle display switch style */
.NijiNav .textToggleDisplayButtonLabel {
	display:block;
	width:0;
	margin:0;
	padding:0;
	font-size:12px;
	color:white;
	border:none;
	box-shadow:none;
	background:none;
	white-space:nowrap;
	cursor:pointer;
	overflow:hidden;
	transition:all .1s linear, width .2s ease-out, font-size 0s;
}
@media screen and (min-width:640px) { .NijiNav:hover .textToggleDisplayButtonLabel {width:26px;} }
@media screen and (max-width:720px) { .NijiNav #grouptab .before-on, .NijiNav #grouptab .after-on {width:26px;} }
.NijiNav .textToggleDisplayButtonInput {
	display:none;
}
.NijiNav #grouptab .textToggleDisplayButtonLabel:hover>.off {
	text-decoration:underline;
}
.NijiNav #grouptab .textToggleDisplayButtonLabel.on {
	width:160px;
	font-size:16px;
	line-height:24px;
	cursor:default;
}
.NijiNav #namebutton .textToggleDisplayButtonLabel {
	box-sizing:border-box;
	width:40px;
	border:2px solid white;
	border-radius:15px;
	padding:2px;
	line-height:16px;
	overflow:hidden;
}
	/* Top bar background switch */
.NijiNav #abovebg {
	left:0;
	opacity:1;
	transition:opacity .2s .3s,left .3s;
}
.NijiNav #JP.textToggleDisplay-on~#abovebg {left:0;}
.NijiNav #VR.textToggleDisplay-on~#abovebg {left:-100%;}
.NijiNav #ID.textToggleDisplay-on~#abovebg {left:-200%;}
.NijiNav #IN.textToggleDisplay-on~#abovebg {left:-400%;}
.NijiNav #KR.textToggleDisplay-on~#abovebg {left:-500%;}
.NijiNav #EN.textToggleDisplay-on~#abovebg {left:-600%;}
.NijiNav #Other.textToggleDisplay-on~#abovebg {opacity:0; transition:opacity .2s,left .3s .2s;}
	/* Incompatibility Tips */
.NijiNav #grouptab, .NijiNav #namebutton, .NijiNav .textToggleDisplay-on~#Nijitip {display:none;}
.NijiNav .textToggleDisplay-on~#grouptab, .NijiNav .textToggleDisplay-on~#namebutton, .NijiNav #Nijitip {display:inline-block; position:relative;}
	/* group tag style */
.NijiNav .navbox-group>div {
	margin:9px 0;
	border-radius:20px;
	padding:0 1em;
	line-height:28px;
}
.NijiNav #JPlist .navbox-group>div {background:#0068AF;}
.NijiNav #VRlist .navbox-group>div {background:#1EC4EE;}
.NijiNav #IDlist .navbox-group>div {background:#009B52;}
.NijiNav #INlist .navbox-group>div {background:#FA7820;}
.NijiNav #KRlist .navbox-group>div {background:#E80132;}
.NijiNav #ENlist .navbox-group>div {background:#673B8E;}
.NijiNav #otherlist .navbox-group>div {background:#2A4B71;}
	/* Link style miscellaneous */
.NijiNav .navbox-list a:not(.new) {color:#222;}
.NijiNav .navbox-list .in-page-edit-article-link-group {display:none;}
	/* liverbox style */
.liverbox {
	display:inline-block;
	padding:8px 4px;
}
.liverbox>:first-child>div {
	display:inline-block;
	width:30px;
	height:30px;
	margin:0 4px;
	vertical-align:-10px;
}
.liverbox>:first-child>div>div {
	position:absolute;/* Transfer Baseline */
	width:30px;
	height:30px;
	border-radius:15px;
	overflow:hidden;
}
.liverbox>:first-child>div>div>div {
	width:30px;
	height:30px;
	transform-origin:-8px 13.333px;
	overflow:hidden;
}
.liverbox .textToggleDisplay:not(.hidden)+span {display:none;}
.liverbox span {font-family:inherit;}
.liverbox span[lang=ja][style] {font-family:JapaneseItalic, sans-serif;}
.liverbox+div {display:inline-block;}

	/* liverbox hover */
@media screen and (min-width:720px) {
	.liverbox>:first-child>div>div:after {
		content:"";
		position:absolute;
		top:-5px;
		bottom:-5px;
		left:-5px;
		right:-5px;
		background:radial-gradient(circle,transparent 20px,#fdfdfd 50px);
	}
	.liverbox, .liverbox *, .liverbox+* {
		transition:all .15s .15s ease-out;
	}
	.liverbox:hover>:first-child>div {width:99px;}
	.liverbox:hover>:first-child>div>div {width:99px; height:38px; margin-top:-4px; border-radius:0;}
	.liverbox:hover>:first-child>div>div>div {transform:scale(2.5);}
	.liverbox {margin-right:69px;}
	.liverbox+div {margin-right:-69px;}
	.liverbox:hover, .liverbox:hover+div {margin-right:0;}
}
/* [[Category:CSS pages under template namespace]] */