LLWiki正在建设中,欢迎加入我们

Widget:Lyrics

来自LLWiki
Bhsd讨论 | 贡献2020年11月6日 (五) 20:27的版本 (// 使用Wikiplus小工具快速编辑)
跳转到导航 跳转到搜索
Template-info.png 小部件文档
这个文档是内联文档。

{{Lyrics}}。

JavaScript脚本:

var resize = function () {
// 计算渲染后的实际宽度
    document.querySelectorAll('.Lyrics_box').forEach( function(ele) {
        var width = (ele.getBoundingClientRect().width < 720) ? '100%' : '';
        ele.querySelectorAll('.Lyrics_original, .Lyrics_translated').forEach( function(self) {
            self.style.width = width;
        });
    });
};

window.addEventListener('load', resize);
window.addEventListener('resize', resize);
//

CSS样式表:

 */
.Lyrics_box {
	max-width: 1080px;
	white-space: pre-wrap;
	font-family:Monaco,Menlo,monospace;
}
.Lyrics_original, .Lyrics_translated {
	width:calc(50% - 5px);
	display: inline-block;
	vertical-align:top;
}
.Lyrics_original {
	margin-right:10px;
}
.Lyrics_no_translation .Lyrics_original {
	width:100%;
	margin-right:0;
}
.Lyrics_no_translation .Lyrics_translated, .Lyrics_line ruby  {
	display:none;
}
.Lyrics_has_ruby {
	line-height: 2.1;
}
.Lyrics_has_ruby ruby {
	display:initial;
}
.Lyrics_has_ruby rt, .Lyrics_has_ruby rp {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
@media only screen and (max-width:720px) {
	.Lyrics_box {
		width: 100% !important;
	}
	.Lyrics_original, .Lyrics_translated {
		width:100%;
	}
	.Lyrics_original {
		margin-right:0;
	}
}

.Lyrics_gradient {
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-box-decoration-break: clone;
	-webkit-text-fill-color: transparent;
	text-fill-color: transparent;
}
.Lyrics_gradient, .Lyrics_single {
	position:relative;
}
.Lyrics_gradient ruby, .Lyrics_gradient rb, .Lyrics_gradient rt {
	background: inherit;
}
.skin-minerva .Lyrics_gradient:hover::before,
.skin-minerva .Lyrics_single:hover::before {
	content:attr(title);
	position:absolute;
	top:100%;
	white-space:nowrap;
	z-index:10;
	background:#fff;
	font-size:0.8em;
	border:1px solid #a7d7f9;
	border-radius: 4px;
	padding:0 3px;
	box-shadow:1px 1px 1px #ccc;
	-webkit-text-fill-color: #000;
	text-fill-color: #000;
}

.Lyrics_box ruby {
	white-space:normal;
}
.Lyrics_box rt {
	font-size:0.8em;
}
.mw-collapsed + .Lyrics_box rt > span:first-child {
	font-size:0;
}
.mw-collapsed + .Lyrics_box rb span {
	letter-spacing:0 !important;
	margin-left:0 !important;
}
.photrans-off {
	font-size:0;
}
.mw-collapsed + .Lyrics_box .photrans-off {
	font-size:1em;
}
.photrans-s {
	visibility:hidden;
	font-size:1.25em;
}
.skin-minerva p + div > .photrans-button {
	margin-top:-1em !important;
}
.photrans-button .mw-collapsed {
	display:none;
}

.memberblock.mw-collapsed {
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24);
}
.memberblock a {
	pointer-events: none;
}
.honoka-block.mw-collapsed ~ .Lyrics_box .Lyrics_gradient:not(.honoka-lyrics), .honoka-block.mw-collapsed ~ .Lyrics_box .Lyrics_single:not(.honoka-lyrics),
.eli-block.mw-collapsed ~ .Lyrics_box .Lyrics_gradient:not(.eli-lyrics), .eli-block.mw-collapsed ~ .Lyrics_box .Lyrics_single:not(.eli-lyrics),
.kotori-block.mw-collapsed ~ .Lyrics_box .Lyrics_gradient:not(.kotori-lyrics), .kotori-block.mw-collapsed ~ .Lyrics_box .Lyrics_single:not(.kotori-lyrics),
.umi-block.mw-collapsed ~ .Lyrics_box .Lyrics_gradient:not(.umi-lyrics), .umi-block.mw-collapsed ~ .Lyrics_box .Lyrics_single:not(.umi-lyrics),
.rin-block.mw-collapsed ~ .Lyrics_box .Lyrics_gradient:not(.rin-lyrics), .rin-block.mw-collapsed ~ .Lyrics_box .Lyrics_single:not(.rin-lyrics),
.maki-block.mw-collapsed ~ .Lyrics_box .Lyrics_gradient:not(.maki-lyrics), .maki-block.mw-collapsed ~ .Lyrics_box .Lyrics_single:not(.maki-lyrics),
.nozomi-block.mw-collapsed ~ .Lyrics_box .Lyrics_gradient:not(.nozomi-lyrics), .nozomi-block.mw-collapsed ~ .Lyrics_box .Lyrics_single:not(.nozomi-lyrics),
.hanayo-block.mw-collapsed ~ .Lyrics_box .Lyrics_gradient:not(.hanayo-lyrics), .hanayo-block.mw-collapsed ~ .Lyrics_box .Lyrics_single:not(.hanayo-lyrics),
.nico-block.mw-collapsed ~ .Lyrics_box .Lyrics_gradient:not(.nico-lyrics), .nico-block.mw-collapsed ~ .Lyrics_box .Lyrics_single:not(.nico-lyrics), 
.chika-block.mw-collapsed ~ .Lyrics_box .Lyrics_gradient:not(.chika-lyrics), .chika-block.mw-collapsed ~ .Lyrics_box .Lyrics_single:not(.chika-lyrics), 
.riko-block.mw-collapsed ~ .Lyrics_box .Lyrics_gradient:not(.riko-lyrics), .riko-block.mw-collapsed ~ .Lyrics_box .Lyrics_single:not(.riko-lyrics), 
.kanan-block.mw-collapsed ~ .Lyrics_box .Lyrics_gradient:not(.kanan-lyrics), .kanan-block.mw-collapsed ~ .Lyrics_box .Lyrics_single:not(.kanan-lyrics), 
.dia-block.mw-collapsed ~ .Lyrics_box .Lyrics_gradient:not(.dia-lyrics), .dia-block.mw-collapsed ~ .Lyrics_box .Lyrics_single:not(.dia-lyrics), 
.you-block.mw-collapsed ~ .Lyrics_box .Lyrics_gradient:not(.you-lyrics), .you-block.mw-collapsed ~ .Lyrics_box .Lyrics_single:not(.you-lyrics), 
.yoshiko-block.mw-collapsed ~ .Lyrics_box .Lyrics_gradient:not(.yoshiko-lyrics), .yoshiko-block.mw-collapsed ~ .Lyrics_box .Lyrics_single:not(.yoshiko-lyrics), 
.hanamaru-block.mw-collapsed ~ .Lyrics_box .Lyrics_gradient:not(.hanamaru-lyrics), .hanamaru-block.mw-collapsed ~ .Lyrics_box .Lyrics_single:not(.hanamaru-lyrics), 
.mari-block.mw-collapsed ~ .Lyrics_box .Lyrics_gradient:not(.mari-lyrics), .mari-block.mw-collapsed ~ .Lyrics_box .Lyrics_single:not(.mari-lyrics), 
.ruby-block.mw-collapsed ~ .Lyrics_box .Lyrics_gradient:not(.ruby-lyrics), .ruby-block.mw-collapsed ~ .Lyrics_box .Lyrics_single:not(.ruby-lyrics), 
.sarah-block.mw-collapsed ~ .Lyrics_box .Lyrics_gradient:not(.sarah-lyrics), .sarah-block.mw-collapsed ~ .Lyrics_box .Lyrics_single:not(.sarah-lyrics), 
.leah-block.mw-collapsed ~ .Lyrics_box .Lyrics_gradient:not(.leah-lyrics), .leah-block.mw-collapsed ~ .Lyrics_box .Lyrics_single:not(.leah-lyrics), 
.ayumu-block.mw-collapsed ~ .Lyrics_box .Lyrics_gradient:not(.ayumu-lyrics), .ayumu-block.mw-collapsed ~ .Lyrics_box .Lyrics_single:not(.ayumu-lyrics), 
.kasumi-block.mw-collapsed ~ .Lyrics_box .Lyrics_gradient:not(.kasumi-lyrics), .kasumi-block.mw-collapsed ~ .Lyrics_box .Lyrics_single:not(.kasumi-lyrics), 
.shizuku-block.mw-collapsed ~ .Lyrics_box .Lyrics_gradient:not(.shizuku-lyrics), .shizuku-block.mw-collapsed ~ .Lyrics_box .Lyrics_single:not(.shizuku-lyrics), 
.karin-block.mw-collapsed ~ .Lyrics_box .Lyrics_gradient:not(.karin-lyrics), .karin-block.mw-collapsed ~ .Lyrics_box .Lyrics_single:not(.karin-lyrics), 
.ai-block.mw-collapsed ~ .Lyrics_box .Lyrics_gradient:not(.ai-lyrics), .ai-block.mw-collapsed ~ .Lyrics_box .Lyrics_single:not(.ai-lyrics), 
.kanata-block.mw-collapsed ~ .Lyrics_box .Lyrics_gradient:not(.kanata-lyrics), .kanata-block.mw-collapsed ~ .Lyrics_box .Lyrics_single:not(.kanata-lyrics), 
.setsuna-block.mw-collapsed ~ .Lyrics_box .Lyrics_gradient:not(.setsuna-lyrics), .setsuna-block.mw-collapsed ~ .Lyrics_box .Lyrics_single:not(.setsuna-lyrics), 
.emma-block.mw-collapsed ~ .Lyrics_box .Lyrics_gradient:not(.emma-lyrics), .emma-block.mw-collapsed ~ .Lyrics_box .Lyrics_single:not(.emma-lyrics), 
.rina-block.mw-collapsed ~ .Lyrics_box .Lyrics_gradient:not(.rina-lyrics), .rina-block.mw-collapsed ~ .Lyrics_box .Lyrics_single:not(.rina-lyrics), 
.shioriko-block.mw-collapsed ~ .Lyrics_box .Lyrics_gradient:not(.shioriko-lyrics), .shioriko-block.mw-collapsed ~ .Lyrics_box .Lyrics_single:not(.shioriko-lyrics)
{
	-webkit-text-fill-color:#dddddd;
	text-fill-color:#dddddd;
}
/*