|
<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>
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);
//</pre>
<includeonly>
</script><style>
/* </includeonly>CSS样式表：<pre lang="css"> */
.Lyrics_box {
display: flow-root;
max-width: 1080px;
white-space: pre-wrap;
}
font-family:Monaco,Menlo;
/* 仅用于拉丁字母的注音 */
.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-blocktable; /* 顶部对齐 */
vertical-align:top;
}
.Lyrics_original {
margin-right: 10px;
}
/* 结合JS实现窄屏适配 */
.Lyrics_no_translation .Lyrics_original {
.Lyrics_no_translation .Lyrics_original,
width:100%;
.Lyrics_narrow .Lyrics_original,
margin-right:0;
.Lyrics_narrow .Lyrics_translated {
width: 100%;
margin-right: 0;
}
/* 手机版初始折叠会造成js无法计算实际宽度 */
.Lyrics_no_translation .Lyrics_translated, .Lyrics_line ruby {
@media screen and (max-width:720px) {
display:none;
.Lyrics_original, .Lyrics_translated {
width: 100%;
margin-right: 0;
}
}
.Lyrics_no_translation .Lyrics_translated {
.Lyrics_has_ruby {
line-heightdisplay: 2.1none;
}
_:-moz-read-write, :root .Lyrics_has_ruby ruby {
line-height: 2.1;
display:initial;
}
.Lyrics_has_ruby rt, .Lyrics_has_ruby{ rp/* {无法正确选中 */
-webkit-user-select: none; /* Safari */
-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;
}
}
-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, .Lyrics_single {
position:relative;
}
.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 {
.skin-minerva .Lyrics_gradient:hover::before,
font-size: 0.8em;
.skin-minerva .Lyrics_single:hover::before {
margin: 5px 8px 4px;
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; /* Safari */
}
.mw-collapsed + .Lyrics_box rt {> span:first-child,
.photrans-off {
font-size:0.8em;
font-size: 0;
}
.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;
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;
}
.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),
.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;
}
/* </pre><includeonly> */
|