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

“Widget:Lyrics”的版本间差异

来自LLWiki
跳转到导航 跳转到搜索
小
（//使用页面/文本对比查看器快速编辑）
 
（未显示3个用户的131个中间版本）
第1行： 第1行：
<noinclude>{{doc|content=用于处理歌词相关的一些效果。请使用{{tl|Lyrics}}调用。}}[[category:混合小部件]]
<noinclude>{{doc|content={{tl|Lyrics}}。}}</noinclude><includeonly><!--{if !isset($wgLyrics) || !$wgLyrics}--><!--{assign var="wgLyrics" value=true scope="global"}-->
<p>JavaScript脚本：[[User:Bhsd/widget/lyrics.js]]</p></noinclude><includeonly><!--{if !isset($wgLyrics) || !$wgLyrics}--><!--{assign var="wgLyrics" value=true scope="global"}--><script defer src='/zh?title=user:bhsd/widget/lyrics.js&action=raw&ctype=text/javascript'></script><style>
<style>
/* </includeonly>CSS样式表：<pre lang="css"> */
/* </includeonly>CSS样式表：<pre lang="css"> */
.Lyrics_box {
.Lyrics_box {
display: inline-block;
display: flow-root;
max-width: 1080px;
}
.Lyrics_box .Lyrics_original,
.Lyrics_box .Lyrics_translated {
width: 49.85%;
min-width: 720px;
display: inline-block;
white-space: pre-wrap;
white-space: pre-wrap;
}
}
/* 仅用于拉丁字母的注音 */
/* </pre><includeonly> */
.Lyrics_monospace {
</style><script>
font-family: Monaco, Menlo, Consolas, 'Liberation Mono', 'Courier New', monospace;
//</includeonly>Javascript脚本：<pre lang=js>
}
window.addEventListener('load', function () {
.Lyrics_monospace .reference {
//get the lyrics
font-family: Helvetica, Arial, sans-serif;
var lyrics_original_s=document.getElementsByClassName("lyrics_original")[0].innerHTML;
}
var lyrics_translated_s=document.getElementsByClassName("lyrics_translated")[0].innerHTML;
.Lyrics_gradient .reference {
-webkit-text-fill-color: currentColor;
text-fill-color: currentColor;
}
.Lyrics_original, .Lyrics_translated {
width: calc(50% - 5px);
display: inline-table; /* 顶部对齐 */
}
.Lyrics_original {
margin-right: 10px;
}
/* 结合JS实现窄屏适配 */
.Lyrics_no_translation .Lyrics_original,
.Lyrics_narrow .Lyrics_original,
.Lyrics_narrow .Lyrics_translated {
width: 100%;
margin-right: 0;
}
/* 手机版初始折叠会造成js无法计算实际宽度 */
@media screen and (max-width:720px) {
.Lyrics_original, .Lyrics_translated {
width: 100%;
margin-right: 0;
}
}
.Lyrics_no_translation .Lyrics_translated {
display: none;
}
_:-moz-read-write, :root .Lyrics_has_ruby {
line-height: 2.1;
}
.Lyrics_has_ruby rt { /* 无法正确选中 */
-webkit-user-select: none; /* Safari */
user-select: none;
}


.Lyrics_gradient {
//replace <p> to \n
-webkit-background-clip: text;
lyrics_original_s=lyrics_original_s.replace(/<p>/g,"").replace(/<\/p>/g,"\n").replace(/<br>/g,"").trim().split("\n");
background-clip: text;
lyrics_translated_s=lyrics_translated_s.replace(/<p>/g,"").replace(/<\/p>/g,"\n").replace(/<br>/g,"").trim().split("\n");
-webkit-box-decoration-break: clone; /* Safari；只有Firefox支持slice且为默认 */
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
}
.Lyrics_gradient ruby, .Lyrics_gradient rb, .Lyrics_gradient rt {
background: inherit; /* 已知Safari和Edge Android需要rb */
}
.Lyrics_gradient:hover, .Lyrics_single:hover {
filter: drop-shadow(2px 2px #e8e8e8);
}
.Lyrics_tipsy .oo-ui-popupWidget-body-padded {
font-size: 0.8em;
margin: 5px 8px 4px;
}


.Lyrics_box ruby {
//arrange lyrics and put into page
white-space: normal; /* Safari */
var lyrics_result=""
for(var i=0;i<Math.max(lyrics_original_s.length,lyrics_translated_s.length);i++){
if(lyrics_original_s[i]==undefined)lyrics_original_s[i]="";
if(lyrics_translated_s[i]==undefined)lyrics_translated_s[i]="";
lyrics_original_s[i]=lyrics_original_s[i].replace(/{([^,]+?)}(.+?)(?=$|{)/g,"<span style=\"color:$1;\">$2</span>");
lyrics_original_s[i]=lyrics_original_s[i].replace(/{(.+?)}(.+?)(?=$|{)/g,"<span style=\"background:-webkit-linear-gradient(left,$1);-webkit-background-clip:text;background-clip:text;\"><span style=\"-webkit-text-fill-color:transparent;text-fill-color:transparent\">$2</span></span>");
lyrics_original_s[i]=lyrics_original_s[i].replace(/{}/g,"");
lyrics_result+="<div lang=\"ja\" class=\"Lyrics_original\">"+lyrics_original_s[i]+"</div><div class=\"Lyrics_translated\">"+lyrics_translated_s[i]+"</div>";
}
}
.mw-collapsed + .Lyrics_box rt > span:first-child,
document.getElementsByClassName("Lyrics_box")[0].innerHTML=lyrics_result;
.photrans-off {
});
font-size: 0;
//</pre>
}
<includeonly>
.mw-collapsed + .Lyrics_box rb span {
</script><!--{/if}--></includeonly>
letter-spacing: 0 !important;
margin-left: 0 !important;
}
.mw-collapsed + .Lyrics_box .photrans-off {
font-size: 1em;
}
.photrans-s {
visibility: hidden;
font-size: 1.25em;
white-space: pre-wrap;
}
.skin-minerva p + div > .photrans-button {
margin-top: -1em !important;
}
.photrans-button .mw-collapsed {
display: none; /* 移动版提前加载样式 */
}

.memberblock, .Lyrics_gradient, .Lyrics_single {
transition: all ease-in-out 0.3s;
}
.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;
}
/* </pre><includeonly> */
</style><!--{/if}--></includeonly>

2022年5月17日 (二) 20:01的最新版本

Template-info.png 小部件文档
[编辑]
这个文档是内联文档。

用于处理歌词相关的一些效果。请使用{{Lyrics}}调用。

JavaScript脚本：User:Bhsd/widget/lyrics.js

CSS样式表：

 */
.Lyrics_box {
	display: flow-root;
	max-width: 1080px;
	white-space: pre-wrap;
}
/* 仅用于拉丁字母的注音 */
.Lyrics_monospace {
	font-family: Monaco, Menlo, Consolas, 'Liberation Mono', 'Courier New', monospace;
}
.Lyrics_monospace .reference {
	font-family: Helvetica, Arial, sans-serif;
}
.Lyrics_gradient .reference {
	-webkit-text-fill-color: currentColor;
	text-fill-color: currentColor;
}
.Lyrics_original, .Lyrics_translated {
	width: calc(50% - 5px);
	display: inline-table; /* 顶部对齐 */
}
.Lyrics_original {
	margin-right: 10px;
}
/* 结合JS实现窄屏适配 */
.Lyrics_no_translation .Lyrics_original,
.Lyrics_narrow .Lyrics_original,
.Lyrics_narrow .Lyrics_translated {
	width: 100%;
	margin-right: 0;
}
/* 手机版初始折叠会造成js无法计算实际宽度 */
@media screen and (max-width:720px) {
	.Lyrics_original, .Lyrics_translated {
		width: 100%;
		margin-right: 0;
	}
}
.Lyrics_no_translation .Lyrics_translated {
	display: none;
}
_:-moz-read-write, :root .Lyrics_has_ruby {
	line-height: 2.1;
}
.Lyrics_has_ruby rt { /* 无法正确选中 */
	-webkit-user-select: none; /* Safari */
	user-select: none;
}

.Lyrics_gradient {
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-box-decoration-break: clone; /* Safari；只有Firefox支持slice且为默认 */
	-webkit-text-fill-color: transparent;
	text-fill-color: transparent;
}
.Lyrics_gradient ruby, .Lyrics_gradient rb, .Lyrics_gradient rt {
	background: inherit; /* 已知Safari和Edge Android需要rb */
}
.Lyrics_gradient:hover, .Lyrics_single:hover {
	filter: drop-shadow(2px 2px #e8e8e8);
}
.Lyrics_tipsy .oo-ui-popupWidget-body-padded {
	font-size: 0.8em;
	margin: 5px 8px 4px;
}

.Lyrics_box ruby {
	white-space: normal; /* Safari */
}
.mw-collapsed + .Lyrics_box rt > span:first-child,
.photrans-off {
	font-size: 0;
}
.mw-collapsed + .Lyrics_box rb span {
	letter-spacing: 0 !important;
	margin-left: 0 !important;
}
.mw-collapsed + .Lyrics_box .photrans-off {
	font-size: 1em;
}
.photrans-s {
	visibility: hidden;
	font-size: 1.25em;
	white-space: pre-wrap;
}
.skin-minerva p + div > .photrans-button {
	margin-top: -1em !important;
}
.photrans-button .mw-collapsed {
	display: none; /* 移动版提前加载样式 */
}

.memberblock, .Lyrics_gradient, .Lyrics_single {
	transition: all ease-in-out 0.3s;
}
.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;
}
/*
取自“https://llwiki.org/mediawiki/index.php?title=Widget:Lyrics&oldid=41153”