It offers full-width and columnized view by keyboard shortcuts on UtaTen lyrics.
As of
// ==UserScript==
// @name UtaTen FullScreen Columnizer
// @name:ja UtaTen FullScreen Columnizer
// @name:zh-CN UtaTen FullScreen Columnizer
// @namespace knoa.jp
// @description It offers full-width and columnized view by keyboard shortcuts on UtaTen lyrics.
// @description:ja キーボードショートカットで、UtaTen の歌詞を横幅いっぱいのカラム分け表示にします。
// @description:zh-CN 通过键盘快捷键，UtaTen的歌词被分成宽的列。
// @include https://utaten.com/lyric/*
// @noframes
// @version 1.0.2
// @grant none
// ==/UserScript==
(function(){
const SCRIPTID = 'UtaTenFullScreenColumnizer';
console.log(SCRIPTID);
const body = document.body;
const header = document.querySelector('body > header');
const lyricBody = document.querySelector('.lyricBody');
if(!header || !lyricBody) return console.log(SCRIPTID, 'Elements not found.');
const beforeLyricBody = lyricBody.previousElementSibling;
window.addEventListener('keydown', e => {
if(['input', 'textarea'].includes(e.target.localName) || e.target.isContentEditable) return;
if(e.ctrlKey || e.altKey || e.shiftKey || e.metaKey) return;
console.log(SCRIPTID, e.key);
switch(e.key){
case('1'):
case('2'):
case('3'):
case('4'):
case('5'):
case('6'):
case('7'):
case('8'):
case('9'):
body.classList.add(SCRIPTID);
header.after(lyricBody);
lyricBody.dataset.columns = e.key;
e.preventDefault();
break;
case('0'):
case('Escape'):
body.classList.remove(SCRIPTID);
beforeLyricBody.after(lyricBody);
delete lyricBody.dataset.columns;
e.preventDefault();
break;
}
}, true);
(function(css){
const style = document.createElement('style');
style.id = SCRIPTID;
style.type = 'text/css';
style.textContent = css;
document.head.appendChild(style);
})(`
/* 横幅いっぱいに */
.lyricBody[data-columns]{
width: 100vw;
padding: 2em 0em 2em 2em;
margin: 0;
box-sizing: border-box;
}
/* カラム分け */
.lyricBody[data-columns="1"] > div > div{columns: 1}
.lyricBody[data-columns="2"] > div > div{columns: 2}
.lyricBody[data-columns="3"] > div > div{columns: 3}
.lyricBody[data-columns="4"] > div > div{columns: 4}
.lyricBody[data-columns="5"] > div > div{columns: 5}
.lyricBody[data-columns="6"] > div > div{columns: 6}
.lyricBody[data-columns="7"] > div > div{columns: 7}
.lyricBody[data-columns="8"] > div > div{columns: 8}
.lyricBody[data-columns="9"] > div > div{columns: 9}
/* 他の要素を非表示に */
.lyricBody[data-columns] ~ *:not(footer),
.lyricBody[data-columns] ~ footer > aside{
display: none;
}
/* フッタより下も塗りつぶす */
body.${SCRIPTID}{
background: #343330;
}
`);
})();