Widget:Lyrics

Bhsd讨论 | 贡献2020年8月27日 (四) 03:06的版本
Template-info.png 小部件文档
这个文档是内联文档。

{{Lyrics}}。

JavaScript脚本:

var resize = function () {
// 计算渲染后的实际宽度
    document.querySelectorAll('.Lyrics_box').forEach( function(ele) {
        var width = parseFloat(window.getComputedStyle( ele, null ).getPropertyValue('width'));
        if(width < 720) {
            ele.querySelectorAll('.Lyrics_original, .Lyrics_translated').forEach( function(self) {
                self.style.width = '100%';
            });
        }
        else {
            ele.querySelectorAll('.Lyrics_original, .Lyrics_translated').forEach( function(self) {
                self.style.width = '';
            });
        }
    });
};

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

CSS样式表:

 */
.Lyrics_box {
	max-width: 1080px;
	white-space: pre-wrap;
}
.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 {
	display:none;
}
.Lyrics_has_ruby {
	line-height: 2.1;
}
@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;
	color:#000;
	-webkit-text-fill-color: initial;
	text-fill-color: initial;
}

.Lyrics_box rt {
	font-size:0.8em;
}
.Lyrics_box rt > span {
	font-size:1em;
}
.mw-collapsed + .Lyrics_box rt > span {
	font-size:0;
}
.mw-collapsed + .Lyrics_box span {
	letter-spacing:0 !important;
	margin-left:0 !important;
}
.Lyrics_box rt.photrans-rt-off {
	font-size:0;
}
.mw-collapsed + .Lyrics_box rt > span.photrans-rt-off {
	font-size:1em;
}
.photrans-s {
	visibility:hidden;
	font-size:1.25em;
}
/*