Template:Voice library relying on Vocaloid culture/styles.css

.more {
	float: right;
	margin: 0 0 0 -1000em;
}

.moreabove {
	margin: -0.25em -0.25em -0.25em -1000em; 
	padding: 0.25em;
}

.more a {
	background-image: url(https://upload.wikimedia.org/wikipedia/commons/2/29/OOjs_UI_icon_viewCompact.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 1em;
	display: block;
	height: 1rem;
	width: 1rem;
}

.more a, #v-block ul a {
	border: 0.0625rem solid transparent;
	border-radius: 0.125rem;
	text-decoration: none;
	transition: 100ms;
}

.moreabove a {
	margin: -0.25em;
	padding: 0.25em;
}

.infobox a > img, .infobox noscript > img {
    max-width: 100% !important;
    height: auto !important;
}

.more a:hover, #v-button div a:hover, #v-block ul a:hover {
	background-color: rgba(0,24,73,0.02745098);
	border-color: transparent;
}

.more a:focus, #v-button div a:focus, #v-block ul a:focus {
	border-color: #3366cc;
	box-shadow: inset 0 0 0 0.0625rem #3366cc, inset 0 0 0 0.125rem #fff;
}

.more a:active, #v-button div a:active, #v-block ul a:active  {
	background-color: rgba(0,36,73,0.08235294);
	border-color: #72777d;
	box-shadow: none;
	color: #ac6600;
}

#v {
	align-items: start;
	background: #f8f9fa;
	border: 0.0625rem solid #c8ccd1;
	border-radius: 0.125rem;
	display: grid;
	gap: 0.375em;
	grid-template-columns: repeat(3,auto)1fr repeat(3,auto);
	margin: 1em 0;
}

#v-top {
	align-items: center;
	display: grid;
	gap: 0.375em;
	grid-column: 4;
	grid-row: 6;
}

#v-heading {
	color: #54595d;
	font-size: 1.1em;
	font-weight: bold;
}

#v-heading a {
	color: inherit;
}

#v-heading span .ilh-comment {
	display: none;
}

#v-button {
	align-content: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: 0.375em 0.3125em;
	grid-column: 2;
	justify-content: flex-end;
	white-space: nowrap;
}

#v-button div a {
	background: transparent;
	border: 0.0625rem solid transparent;
	border-radius: 3rem;
	color: #54595d;
	display: inline-block;
	padding: 0.3125em 0.75em;
	text-decoration: none;
	transition: 100ms;
}

#v-button a.mw-selflink {
	background: #eaecf0;
	border-color: #eaecf0;
}

#v-button a.mw-selflink:hover {
	background: #eaecf0;
}

#v-body {
	align-items: flex-start;
	display: flex;
	gap: 0.375em;
	grid-column: 1/span 7;
	grid-row: 11;
	justify-content: flex-start;
	overflow: auto;
	padding: 0 1.125em 1.875em 1.125em;
	text-align: left;
	white-space: nowrap;
}

#v-block {
	background: #fff;
	border: 0.0625rem solid #c8ccd1;
	border-radius: 0.125rem;
	display: grid;
	gap: 0.1875em;
	grid-template-columns: repeat(9, auto);
	grid-template-rows: repeat(14, auto);
}

#v-block div {
	border-radius: 0.125rem;
	color: #54595d;
	font-weight: bold;
	font-size: calc(1em * 0.875);
	grid-column: 5;
	grid-row: 4;
	user-select: none;
}

#v-block:after {
	background: #eaecf0;
	content: "";
	display: block;
	grid-column: 5;
	grid-row: 7;
	height: 0.0625rem;
}

#v-block ul {
	grid-column: 5;
	grid-row: 10;
	list-style: none;
	margin: -0.0625rem;
	padding: unset;
}

#v-block ul li {
	margin: unset;
}

#v-link {
	align-self: end;
	grid-column: 1/span 7;
	grid-row: 11;
	justify-self: end;
	padding: 0.25em;
	position: absolute;
	z-index:1;
}

#v-link a {
	background: #eaecf0;
	border-radius: 0.125em;
	display: block;
	height: 0.125em;
	width: 0.125em;
}

@media (max-width: 428px) {

	#v {
	align-items: unset;
	gap: unset;
	grid-template-columns: unset;
	height: 75vh;
	overflow: auto;
	padding: unset;
	}

	#v-top {
	background: #f8f9fa;
	gap: 0.25em;
	grid-column: 1;
	grid-row: 1;
	grid-template-columns: repeat(9, auto);
	grid-template-rows: repeat(27, auto);
	}

	#v-heading {
	font-size: 1.4em;
	grid-column: 5;
	grid-row: 11;
	}

	#v-button {
	flex-wrap: nowrap;
	grid-column: 5;
	grid-row: 18;
	justify-content: unset;
	margin: 0 -1em -3em -1em;
	overflow: auto;
	padding: 0 1em 3em 1em;
	}

	#v-body {
	align-items: unset;
	display: flex;
	flex-direction: column;
	font-size: unset;
	gap: unset;
	grid-column: 1;
	grid-row: 5;
	margin: unset;
	overflow: unset;
	padding: unset;
	z-index:1;
	}

	#v-block {
	background: #f8f9fa;
	border: unset;
	gap: 0.25em;
	justify-content: start;
	grid-template-columns: repeat(9,auto)1fr repeat(3,auto);
	grid-template-rows: repeat(19,auto);
	margin: unset;
	}

	#v-block div {
	color: transparent;
	font-family: "Linux Libertine", Georgia, Times, serif;
	font-size: 1em;
	font-weight: unset;
	grid-column: 5;
	grid-row: 1/span 19;
	height: 1.125em;
	line-height: 1;
	margin: unset;
	padding: 2.95em 0 2.8875em 0;
	width: min-content;
	writing-mode: vertical-lr;
	position: sticky;
	top: 0;
	}

	#v-block div span {
	background: #72777d;
	border-radius: 0.125rem;
	color: #f8f9fa;
	padding: 0.0625rem 0;
	text-combine-upright: all;
	}

	#v-block:after {
	grid-column: 1/span 13;
	grid-row: 1;
	}

	#v-block ul {
	background: unset;
	border: unset;
	display: flex;
	flex-wrap: wrap;
	gap: 0.375em 0.3125em;
	grid-column: 9;
	grid-row: 10;
	margin: unset;
	}

	#v-block ul a {
	background: #fff;
	border: 0.0625em solid #eaecf0;
	border-radius: 3rem;
	display: block;
	padding: 0.3125em 0.75em;
	text-decoration: none;
	width: auto;
	transition: 100ms;
	}

	#v-block ul a:hover {
	border-color: #a2a9b1;
	}

	#v-block ul a:focus {
	border-color: #3366cc;
	}
	
	#v-block ul a:active {
	border-color: #72777d;
	}
}