UserScript:Zen Mode
scriptxx.js scrapbox.PageMenu.addItem({
title: 'Zen Mode',
onClick: () => {
$('div .page-menu').toggleClass("page-menu-zen-mode");
$('.col-page').toggleClass("col-page-zen-mode");
$('.col-page').toggleClass("full-height");
$('.col-page-side').toggleClass("col-page-side-zen-mode");
$('.col-page-side').toggleClass("opacity-zero");
$('nav').toggleClass("opacity-zero");
$('nav').toggleClass("thin");
$('.related-page-list').toggleClass('opacity-zero');
$('.related-page-list').toggleClass('thin');
$('.quick-launch').toggleClass('opacity-zero');
$('.quick-launch').toggleClass('thin');
$('.telomere').toggleClass('opacity-zero');
}
})style.css
.full-height {
height:100% !important;
}
.opacity-zero:not(:hover) {
opacity:0;
}
.thin:not(:hover) {
max-height:3px;
min-height:0px !important;
margin:0px !important;
}
.col-page-side-zen-mode {
width:3px;
}
.col-page-side-zen-mode:hover {
width:66px;
}
.page-menu-zen-mode {
overflow:visible;
}
.col-page-zen-mode {
width: 100% !important;
max-width:100%;
}UserScript:新書モード と同じ造りか。
別の実装かな？
script.js
/*zen mode*/
scrapbox.PageMenu.addItem({
title: 'Zen mode',
onClick: e => {
var bg = '#EEEEEE' // ここにお好きな背景色を入れてね（テーマの背景が黒なら black で）
var style = document.getElementById('__zen__')
if (style) { style.remove(); e.currentTarget.innerText = 'Zen mode'; return }
else e.currentTarget.innerText = String.fromCharCode(0x02713) + ' Zen mode'
var css = `body, .page { background-color:${bg} !important; background-image:none !important }` +
'.navbar:not(:hover), .line .telomere:not(:hover), .col-page-side:not(:hover) { opacity:0 }'
style = document.createElement('style')
style.setAttribute('id', '__zen__')
style.appendChild(document.createTextNode(css))
document.head.appendChild(style)
}
})