LLWiki正在建设中,欢迎加入我们!
“Widget:Lyrics”的版本间差异
跳转到导航
跳转到搜索
小 (// Edit via Wikiplus) |
(//使用页面/文本对比查看器快速编辑) |
||
(未显示2个用户的99个中间版本) | |||
第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"}--><script> |
|||
<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> |
|||
// </includeonly>Javascript脚本:<pre lang=js> |
|||
window.addEventListener('load', function () { |
|||
var ele = document.querySelector('.Lyrics_box'), |
|||
width = ele.dataset.width, |
|||
styles = document.createElement('style'); |
|||
/* 计算渲染后的实际宽度,这部分备用 |
|||
var content = document.querySelector('#mw-content-text'), |
|||
bodyWidth = parseInt(window.getComputedStyle( content, null ).getPropertyValue('width'),10); |
|||
*/ |
|||
styles.innerHTML = '@media only screen and (min-width:720px) { div.Lyrics_box { width:' + width + '; } }'; |
|||
document.head.appendChild(styles); |
|||
}); |
|||
//</pre> |
|||
<includeonly> |
|||
</script> |
|||
<style> |
|||
/* </includeonly>CSS样式表:<pre lang="css"> */ |
/* </includeonly>CSS样式表:<pre lang="css"> */ |
||
.Lyrics_box { |
.Lyrics_box { |
||
display: flow-root; |
|||
width: 100%; |
|||
max-width: 1080px; |
max-width: 1080px; |
||
white-space: pre-wrap; |
|||
display: inline-block; |
|||
} |
} |
||
/* 仅用于拉丁字母的注音 */ |
|||
.Lyrics_box.Lyrics_has_ruby .Lyrics_original, |
|||
.Lyrics_monospace { |
|||
.Lyrics_box.Lyrics_has_ruby .Lyrics_translated { |
|||
font-family: Monaco, Menlo, Consolas, 'Liberation Mono', 'Courier New', monospace; |
|||
line-height: 2.1; |
|||
} |
} |
||
.Lyrics_monospace .reference { |
|||
.Lyrics_box.Lyrics_no_ruby .Lyrics_original, |
|||
font-family: Helvetica, Arial, sans-serif; |
|||
.Lyrics_box.Lyrics_no_ruby .Lyrics_translated { |
|||
vertical-align: top; |
|||
} |
} |
||
.Lyrics_gradient .reference { |
|||
.Lyrics_box .Lyrics_original, |
|||
-webkit-text-fill-color: currentColor; |
|||
.Lyrics_box .Lyrics_translated { |
|||
text-fill-color: currentColor; |
|||
width:100%; |
|||
display: inline-block; |
|||
white-space: pre-wrap; |
|||
} |
} |
||
.Lyrics_original, .Lyrics_translated { |
|||
@media only screen and (min-width:720px) { |
|||
width: calc(50% - 5px); |
|||
.Lyrics_box .Lyrics_original { |
|||
display: inline-table; /* 顶部对齐 */ |
|||
margin-right:10px; |
|||
} |
|||
.Lyrics_original { |
|||
.Lyrics_box .Lyrics_original, |
|||
margin-right: 10px; |
|||
.Lyrics_box .Lyrics_translated { |
|||
} |
|||
width: calc(50% - 5px); |
|||
/* 结合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 { |
.Lyrics_gradient { |
||
-webkit-background-clip: text; |
-webkit-background-clip: text; |
||
background-clip: text; |
background-clip: text; |
||
-webkit-box-decoration-break: clone; |
-webkit-box-decoration-break: clone; /* Safari;只有Firefox支持slice且为默认 */ |
||
-webkit-text-fill-color: transparent; |
-webkit-text-fill-color: transparent; |
||
text-fill-color: transparent; |
text-fill-color: transparent; |
||
position:relative; |
|||
} |
} |
||
.Lyrics_gradient ruby, .Lyrics_gradient rb, .Lyrics_gradient rt { |
.Lyrics_gradient ruby, .Lyrics_gradient rb, .Lyrics_gradient rt { |
||
background: inherit; |
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 { |
|||
.Lyrics_gradient:hover::before { |
|||
pointer-events: none; |
|||
content:attr(title); |
|||
position:absolute; |
|||
bottom:100%; |
|||
left:0; |
|||
background:#fff; |
|||
white-space:nowrap; |
|||
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; |
|||
} |
} |
||
/* </pre><includeonly> */ |
/* </pre><includeonly> */ |
2022年5月17日 (二) 20:01的最新版本
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;
}
/*