LLWiki正在建设中,欢迎加入我们!
“Widget:Lyrics”的版本间差异
跳转到导航
跳转到搜索
小 标签:移动版网页编辑 移动版编辑 |
标签:撤销 |
||
第1行: | 第1行: | ||
<noinclude>{{doc|content={{tl|Lyrics}}。}}</noinclude><includeonly><!--{if !isset($wgLyrics) || !$wgLyrics}--><!--{assign var="wgLyrics" value=true scope="global"}-->< |
<noinclude>{{doc|content={{tl|Lyrics}}。}}</noinclude><includeonly><!--{if !isset($wgLyrics) || !$wgLyrics}--><!--{assign var="wgLyrics" value=true scope="global"}--><script> |
||
//</includeonly>JavaScript脚本:<pre lang=js> |
|||
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); |
|||
//</pre> |
|||
<includeonly> |
|||
</script> |
|||
<style> |
|||
/* </includeonly>CSS样式表:<pre lang="css"> */ |
/* </includeonly>CSS样式表:<pre lang="css"> */ |
||
.Lyrics_box { |
.Lyrics_box { |
||
第5行: | 第29行: | ||
white-space: pre-wrap; |
white-space: pre-wrap; |
||
} |
} |
||
⚫ | |||
.Lyrics_line { |
|||
width:calc(50% - 5px); |
|||
column-count:2; |
|||
⚫ | |||
column-width:360px; |
|||
⚫ | |||
column-gap:10px; |
|||
} |
} |
||
.Lyrics_original { |
|||
⚫ | |||
margin-right:10px; |
|||
} |
} |
||
⚫ | |||
⚫ | |||
width:100%; |
width:100%; |
||
margin-right:0; |
|||
⚫ | |||
⚫ | |||
} |
} |
||
.Lyrics_no_translation .Lyrics_translated, .Lyrics_line ruby { |
.Lyrics_no_translation .Lyrics_translated, .Lyrics_line ruby { |
||
第30行: | 第53行: | ||
.Lyrics_box { |
.Lyrics_box { |
||
width: 100% !important; |
width: 100% !important; |
||
} |
|||
.Lyrics_original, .Lyrics_translated { |
|||
width:100%; |
|||
} |
|||
.Lyrics_original { |
|||
margin-right:0; |
|||
} |
} |
||
} |
} |
||
.Lyrics_gradient { |
.Lyrics_gradient { |
||
-webkit-background-clip: text; |
-webkit-background-clip: text; |
2020年8月31日 (一) 10:42的版本
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, .Lyrics_line ruby {
display:none;
}
.Lyrics_has_ruby {
line-height: 2.1;
}
.Lyrics_has_ruby ruby {
display:initial;
}
@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;
}
.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;
}
/*